使用WebPack公开ReactClass
[英]Expose ReactClass using WebPack
问题描述
I'm trying to expose a ReactClass, using WebPack, to reuse it at different html pages. 
我正在尝试使用WebPack公开ReactClass，以便在不同的html页面上重用它。 Is it possible? 可能吗？ What is the correct way? 正确的方法是什么？ For simplicity, I'll do an example using two times at one html (But it should be used in a lot of different html in the real application) 为简单起见，我将在一个html上使用两次示例（但是在实际应用程序中应在许多不同的html中使用它）
All the source are available here: https://github.com/mqueirozcorreia/React-Fundamentals/tree/video2 所有资源都可以在这里找到： https ： //github.com/mqueirozcorreia/React-Fundamentals/tree/video2
The webpack.config.js successfully creates the bundled file and the code is below: webpack.config.js成功创建了捆绑文件，代码如下：
var HtmlWebpackPlugin = require('html-webpack-plugin')
var HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry: [
'./app/index.js'
],
output: {
path: __dirname + '/dist',
filename: "index_bundle.js"
},
module: {
loaders: [
{test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
]
},
plugins: [HTMLWebpackPluginConfig]
};
The ReactClass is at app\\MyReactClass.js which the code is the following: ReactClass位于app\\MyReactClass.js ，其代码如下：
var React = require('react');
var MyReactClass = React.createClass({
render: function () {
return (
<div>MyReactClass = Hello {this.props.name}</div>
)
}
});
And the MyReactClass is exposed the app\\index.js as follows: MyReactClass公开了app\\index.js ，如下所示：
...
require("expose?MyReactClass!./MyReactClass.js");
The global variable "MyReactClass" has an instance of an Object (As the alert shows), but when I try to use it at dist\\index.html to ReactDOM.render() , it throws that error: 全局变量“ MyReactClass”具有一个Object的实例（如警报所示），但是当我尝试在dist\\index.html到ReactDOM.render()上使用它时，它将抛出该错误：
Warning: React.createElement: type should not be null, undefined, boolean, or number.
dist\\index.html partial code: dist\\index.html部分代码：
...
<body>
<div id="app"></div>
<div id="component1"></div>
<div id="component2"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js" type="text/javascript"></script>
</body>
<script type="text/javascript">
alert(MyReactClass);
ReactDOM.render(React.createElement(MyReactClass, { name: 'Component1' }), document.getElementById('component1'));
ReactDOM.render(React.createElement(MyReactClass, { name: 'Component2' }), document.getElementById('component2'));
</script>
</html>
What am I doing wrong? 我究竟做错了什么？
1 个解决方案
解决方案1
0 已采纳 2016-03-14 04:00:41
I just figure out what I was missing. 我只是弄清楚我所缺少的。
Just need to module.exports the MyReactClass variable to work: 只需要module.exports MyReactClass变量即可工作：
module.exports = MyReactClass;
So the MyReactClass.js looks like this now 所以MyReactClass.js现在看起来像这样
var React = require('react');
var MyReactClass = React.createClass({
render: function () {
return (
<div>MyReactClass = Hello {this.props.name}</div>
)
}
});
module.exports = MyReactClass;
https://github.com/mqueirozcorreia/React-Fundamentals/blob/ba19aa5cff21f0c4881901e0a96aed6ddaea8e18/app/MyReactClass.js https://github.com/mqueirozcorreia/React-Fundamentals/blob/ba19aa5cff21f0c4881901e0a96aed6ddaea8e18/app/MyReactClass.js
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.