使用 WebPack 公开 ReactClass

Expose ReactClass using WebPack

本文关键字：ReactClass 公开 WebPack 使用      更新时间：2023-09-26

我正在尝试使用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");

全局变量"MyReactClass"有一个对象的实例（如警报所示），但是当我尝试在dist'index.html使用它时ReactDOM.render()，它会抛出该错误：

警告：React.createElement：类型不应为空，未定义， 布尔值或数字。它应该是一个字符串（对于 DOM 元素）或 反应类（用于复合组件）。 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>

我做错了什么？

我只是弄清楚我错过了什么。

只需要 module.export 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

相关文章：