ReactJS：未捕获的 ReferenceError：需要未定义

IT技术 javascript reactjs
2021-04-05 20:09:53

我正在尝试在 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

4个回答

如果你没有使用像 webpack 等任何module打包器。你应该将你的组件分配给一些 javascript 全局对象，因为 .jsx 中的对象没有放在全局范围内

所以这是解决方案（此处使用窗口对象）

定义module：

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

你在哪里使用它：

ReactDOM.render(
  <window.AdminMenu/>,
  document.getElementById('content')
);
你说：“如果你没有使用任何像 webpack 等的module打包器”。“etc”中是否包括“grunt”我正在使用grunt来捆绑我的js。我仍然收到此错误。
2021-06-02 20:09:53

你必须使用 

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

代替

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

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

导出module：

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

导入一个module：

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

const App = () => {
  return (
    <div>
      <Hello name="Pavel" />
    </div>
  )
}
要启动并运行它，请使用一个简单的样板文件，然后查看它在做什么... github.com/srn/react-webpack-boilerplate
2021-05-27 20:09:53
没有const得到错误：VM1842:4 Uncaught ReferenceError: exports is not defined
2021-05-31 20:09:53
出现错误const：browser.js:2027 Uncaught SyntaxError: Unexpected token (1:15)
2021-06-08 20:09:53
2021-06-16 20:09:53
当然，因为它不是复制粘贴代码，你应该设置 webpack 以支持 es6
2021-06-21 20:09:53

您应该在这里阅读更多关于module的信息：https : //www.sitepoint.com/understanding-es6-modules/

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

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

另外，如果方便的话，您可以在评论中用俄语写问题

其它你可能感兴趣的问题
上一篇找不到module“sass” 下一篇browserHistory.push 不会导航到新页面