javascript - 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对象)

定义模块:

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

你在哪里使用它:

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