ReactJS: Uncaught ReferenceError: require没有定义

ReactJS: Uncaught ReferenceError: require is not defined

本文关键字：定义 ReferenceError Uncaught ReactJS require      更新时间：2023-09-26

我试图在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

你必须使用

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

代替

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

如果你没有使用任何模块捆绑器，如webpack或等。你应该把你的组件分配给一些javascript全局对象，因为。jsx中的对象不会放在全局作用域中

所以这就是解决方案(这里使用window object)

定义模块:

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

使用位置:

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

考虑在React中使用ES6模块而不是require

导出一个模块:

// 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>
  )
}

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

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

  1. 看起来，尽管你正在使用Webpack，你使用它的方式是错误的。在你最终的bundle(最终的JS文件)中，它不应该包含任何require关键字。你在你的webpack中使用Babel了吗?请向我们展示您的WebPack配置。
    2. 你的AdminMenu文件看起来不像模块。您的adminMenu文件应该包含'export'关键字，之后您将能够'要求'或'导入'它从其他文件。

如果方便的话，你也可以在评论中用俄语写问题

相关文章：