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

You have to use

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

in place of

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

Answer 3

考虑使用ES6模块，而不是使用React

导出模块：

// src/hello.js
// export as default
export default const hello = ({name}) => (
  <h1>Hello {name}</h1>
)

导入模块：

// src/index.js
// import from relative directory (src)
import Hello from './hello'

const App = () => {
  return (
    <div>
      <Hello name="Pavel" />
    </div>
  )
}

Answer 4

您应该阅读有关模块的更多信息，例如：https://www.sitepoint.com/understanding-es6-modules/

现有代码中的主要问题是：

看起来，尽管你使用的是Webpack，但你使用它是错误的。在你的最后一个包（最终的JS文件）中，它不应该包含任何＆＃39;要求＆＃39;关键字。您是否将Babel与您的webpack一起使用？请向我们展示您的WebPack配置。
您的AdminMenu文件看起来与模块不同。您的adminMenu文件应包含＆＃39; export＆＃39;关键字，之后您就可以要求＆＃39;或者＆＃39; import＆＃39;来自其他文件。

此外，如果对您来说更方便，您可以用俄语在评论中写问题

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

4 个答案: