ReactJS：未捕获的ReferenceError：需求未定义

Question

我正在尝试在React JS中使用DRY。我正在尝试在不同文件中使用相同的HTML部分

部分：

var AdminMenu = React.createClass({
 getInitialState: function() {
   return {};
 },
 render: function() {
   return (
     <h1>Menu</h1>
   );
 }
});

我在另一个文件中请求它：

require('./scripts/adminMenu.js');

ReactDOM.render(
 <AdminMenu/>,
 document.getElementById('content')
);

但是我遇到一个错误：

Uncaught ReferenceError: require is not defined

该脚本包含在html页面中，例如： <script type="text/babel" src="scripts/admin.js"></script>

我正在使用webpack

Answer 1

如果您未使用任何webpack等模块捆绑程序，则应将组件分配给某些javascript全局对象，因为.jsx中的对象未置于全局范围内

所以这是解决方案（这里使用了 窗口 对象）

定义的模块：

window.AdminMenu = React.createClass({
  getInitialState: function() {
    return {};
  },
  render: function() {
    return (
      <h1>Menu</h1>
    );
  }
});

使用位置：

ReactDOM.render(
  <window.AdminMenu/>,
  document.getElementById('content')
);