ReactJS:未捕获的ReferenceError:未定义require

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')
);

Answer 2

你必须用

const { Component } = React;
const { render } = ReactDOM;

代替

import React, { Component } from 'react';
import ReactDOM from 'react-dom';