如何在其他站点上嵌入React组件? [英] How to embed React component on other sites?
问题描述
我已经创建了React应用程序，并且需要生成嵌入到其他网站的代码.它是大型应用程序，在这里我只想将一个组件用作其他域的小部件.我已阅读用React& Webpack 和如何将react组件嵌入其他域吗?.我设置了Webpack，但仍然无法在其他域上呈现窗口小部件.
I've created React application and I need to generate embed code to other websites. It's large app where I want to do only one component as a widget for other domains. I have read Writing embeddable Javascript plugin with React & Webpack and How to embed react component on other domains?. I set my webpack, but still can't render the widget on another domain.
此小部件应:
- 可以通过
<script>标签使用，而不是iframe - 仅显示应用程序的一部分(路径
/referral)，但不显示所有应用程序
- be available via
<script>tag, not iframe - show only one part of the app (path
/referral), but not all app
该小部件是一个按钮和弹出窗口，单击该按钮即可显示该窗口.
The widget is a button and popup, which displays by click on the button.
这是我的webpack.config.js在client文件夹中:
const path = require('path');
const bundleOutputDir = './referral';
const env = require('yargs').argv.env;
module.exports = env => {
const isDevBuild = !(env && env.prod);
if (env === 'build') {
mode = 'production';
} else {
mode = 'development';
}
return [
{
mode: mode,
entry: './src/components/early-referrals/Referral.js',
output: {
filename: 'widget.js',
path: path.resolve(bundleOutputDir),
library: 'Referral',
libraryTarget: 'umd',
umdNamedDefine: true
},
devServer: {
contentBase: bundleOutputDir
},
module: {
rules: [
{ test: /\.html$/i, use: 'html-loader' },
{
test: /\.css$/i,
use: [
'style-loader',
'css-loader' + (isDevBuild ? '' : '?minimize')
]
},
{
test: /\.(png|jpe?g|gif)$/i,
use: [
{
loader: 'file-loader'
}
]
},
{
test: /(\.jsx|\.js)$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: [
[
'@babel/env',
{
targets: {
browsers: ['ie 6', 'safari 7']
}
}
]
]
}
}
}
]
}
}
];
};
这是组件RegisterReferral.js，它是webpack中的入口点:
Here is component RegisterReferral.js, which is entry point in webpack:
import PopupRef from '../popup/PopupRef';
const RegisterReferral = ({
...
}) => {
const [...] = useState();
useEffect(() => {
...
}, []);
return (
<div>
// some styles for button that displays popup
<PopupRef />
</div>
);
};
const mapStateToProps = state => ({
...
});
export default connect(
mapStateToProps,
{ ... }
)(RegisterReferral);
PopupRef.js是带有弹出窗口的组件，应在按钮内的其他网站上显示.
PopupRef.js is a component with popup, which should displays on other websites within the button.
在App.js中，我具有要作为可嵌入对象创建的该组件的路线:
In the App.js, I have the route for this component that I want to create as an embeddable:
<Route exact path="/referral" component={RegisterReferral} />
这是我将代码粘贴到另一个域上的一种方式:
And this is a way how I paste the code on another domain:
// the URL in script is an URL of bundle file from webpack
<html>
<head>
<script src="http://example.com/client/referral/widget.js" type="text/javascript"></script>
</head>
<body>
<p>Another website</p>
<div id='app'></div>
</body>
</html>
此外，我尝试使用Referral.js在webpack.config.js中执行入口点.这是此组件:
Also, I've tried to do entry point in webpack.config.js with Referral.js. And here is this component:
// Referral.js
import React from 'react';
import { render } from 'react-dom';
import App from './RegisterReferral.js';
render(<App />, document.getElementById('app'));
// At this case, webpack.config.js has 2 changes:
entry: './src/components/early-referrals/Referral.js',
output: {
...
library: 'Referral',
},
没有任何效果.我的组件未在其他网站上显示.
Nothing works. My component doesn't display on other websites.
请帮助我找出问题所在，以及如何在其他网站上嵌入来自React应用程序的一个组件(不是所有应用程序).
Please help me to figure out what's wrong and how to embed one component (not all app) from React app on other websites.
推荐答案
假定您正确配置了Webpack以捆绑React js代码
Assume that you correctly config your webpack to bundle react js code
这是我在所需的任何页面中渲染组件的方式
This is how I render the component in any page I want
假设我有这个组件
import React, {Component} from "react";
import {render} from "react-dom";
class LoginForm extends Component { }
render(<LoginForm/>, document.getElementById("loginForm")); // use render method
刚刚看过您的代码，我认为您还需要更改index.html中的ID
Just saw your code I think you need also change the id in index.html
<div id="root"></div>
到
<div id="referral"></div>
这篇关于如何在其他站点上嵌入React组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
