如何在其他域上嵌入react组件？

IT技术 javascript reactjs webpack ecmascript-6 embedding
2021-04-29 05:20:45

我创建了一个简单的 React 组件。我希望该组件用作插件或小部件。我从Writing embeddable Javascript plugin with React & Webpack 中得到了帮助，并设法将我的webpack 设置如下：

output: {
    path: __dirname + '/dist',
    filename: './app/components/FirstWidgetIndex.js',
    publicPath: '/',
    library: 'tracking',
    libraryTarget: 'umd',
    umdNamedDefine: true,
  }

我的组件如下：

import React, { Component, PropTypes } from 'react';

export default class FirstWidget extends Component {

    constructor() {
        super();
    }

    render() {

        return (
            <div className="setting-fullpage">
                <p>React Widget</p>
            </div>
        )
    }
}

const mapStateToProps = state => {
    //
}

module.exports = FirstWidget

我的FirstWidgetIndex文件（webpack的入口点）如下：

import React, { Component, PropTypes } from 'react';
import { render } from 'react-dom';
import App from './FirstWidget.js';

render(
  <App />,
  document.getElementById('app')
);

现在，我想将它添加FirstWidget为一个可嵌入的小部件。我在html文件中的第三方域上调用它，如下所示：

<html>
    <head>
        <script type="text/jsx" src="https://mydomain/firstWidget"></script>
    </head>
    <body>
        <p>Testing React Widget</p>
        <div id='app'></div>
    </body>
</html>

但它没有在html页面上呈现我的小部件。任何人都可以请建议我是否遗漏了什么？

1个回答

你需要告诉 react 将在哪里渲染，例如：

FirstWidget.js

import React, { Component } from 'react';

export default class FirstWidget extends Component {
  render () {
    return (
      <h1>Hello world</h1>
    );
  }
}

索引.js

这是你在 webpack 中的入口点

import React from 'react';
import { render } from 'react-dom';

import App from './FirstWidget.js';

render(
  <App />,
  document.getElementById('app')
);

在您的index.html 中，您需要有一个带有appid的标签。

<div id='app'></div>

注意： 中的代码index.js需要像上面一样，并且应该是您的 webpack 配置中的入口点。

其它你可能感兴趣的问题
上一篇使用jszip在前端下载大量文件 下一篇为什么我的 create-react-app console.log 两次？