Question

我试图使用WebPack公开ReactClass，以便在不同的html页面重用它。可能吗？什么是正确的方法？为简单起见，我将在一个html中使用两次示例（但它应该在实际应用程序中的许多不同的html中使用）

此处提供所有来源： https://github.com/mqueirozcorreia/React-Fundamentals/tree/video2

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]
};

ReactClass位于app\MyReactClass.js，代码如下：

var React = require('react');

var MyReactClass = React.createClass({
  render: function () {
    return (
      <div>MyReactClass = Hello {this.props.name}</div>
    )
  }
});

MyReactClass公开了app\index.js，如下所示：

...
require("expose?MyReactClass!./MyReactClass.js");

全局变量＆＃34; MyReactClass＆＃34;有一个Object的实例（如警告所示），但当我尝试在dist\index.html到ReactDOM.render()使用它时，它会抛出该错误：

警告：React.createElement：type不应为null，未定义，布尔值或数字。它应该是一个字符串（对于DOM元素）或a ReactClass（用于复合组件）。 https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js线 18794

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>

我做错了什么？

Answer 1

我只知道我错过了什么。

只需要module.exports MyReactClass变量就可以了：

module.exports = MyReactClass;

所以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

使用WebPack公开ReactClass

1 个答案: