我正在尝试在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>
<script type="text/babel" src="scripts/admin.js"></script>
我正在使用webpack
如果您未使用任何webpack等模块捆绑程序,则应将组件分配给某些javascript全局对象,因为.jsx中的对象未置于全局范围内
所以这是解决方案(这里使用了 窗口 对象)
定义的模块:
window.AdminMenu = React.createClass({ getInitialState: function() { return {}; }, render: function() { return ( <h1>Menu</h1> ); } });
使用位置:
ReactDOM.render( <window.AdminMenu/>, document.getElementById('content') );