Javascript ReactJS：未捕获的 ReferenceError：需要未定义
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38219311/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
ReactJS: Uncaught ReferenceError: require is not defined
提问by Pavel Babin
I'm trying to use DRY in React JS. I'm trying to use the same HTML partial in different files
我正在尝试在 React JS 中使用 DRY。我正在尝试在不同的文件中使用相同的 HTML 部分
partial:
部分的：
var AdminMenu = React.createClass({
getInitialState: function() {
return {};
},
render: function() {
return (
<h1>Menu</h1>
);
}
});
I'm requeiring it in another file:
我在另一个文件中重新请求它：
require('./scripts/adminMenu.js');
ReactDOM.render(
<AdminMenu/>,
document.getElementById('content')
);
But I'm getting an error:
但我收到一个错误：
Uncaught ReferenceError: require is not defined
this scripts are included on html page like:
<script type="text/babel" src="scripts/admin.js"></script>
此脚本包含在 html 页面中，例如：
<script type="text/babel" src="scripts/admin.js"></script>
I'm using webpack
我正在使用 webpack
采纳答案by Sergey Belousov
If you are not using any module bundler like webpack or etc. You should assign you components to some javascript global object, because objects from .jsx are not put in global scope
如果你没有使用像 webpack 等任何模块打包器。你应该将你的组件分配给一些 javascript 全局对象，因为 .jsx 中的对象没有放在全局范围内
So here is the solution (used windowobject here)
所以这是解决方案（此处使用窗口对象）
Defined module:
定义模块：
window.AdminMenu = React.createClass({
getInitialState: function() {
return {};
},
render: function() {
return (
<h1>Menu</h1>
);
}
});
Where you use it:
你在哪里使用它：
ReactDOM.render(
<window.AdminMenu/>,
document.getElementById('content')
);
回答by Bakul Gadara
You have to use
你必须使用
const { Component } = React;
const { render } = ReactDOM;
in place of
代替
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
回答by webdeb
Consider to use ES6 modules instead of require with React
考虑在 React 中使用 ES6 模块而不是 require
export a module:
导出模块：
// src/hello.js
// export as default
export default const hello = ({name}) => (
<h1>Hello {name}</h1>
)
import a module:
导入一个模块：
// src/index.js
// import from relative directory (src)
import Hello from './hello'
const App = () => {
return (
<div>
<Hello name="Pavel" />
</div>
)
}
回答by steppefox
You should read more about modules for example here: https://www.sitepoint.com/understanding-es6-modules/
您应该在这里阅读更多关于模块的信息：https: //www.sitepoint.com/understanding-es6-modules/
The main problems in your existing code are:
您现有代码中的主要问题是：
- It looks, in spite of that you are using Webpack, you use it wrong way. In your final bundle (final JS file), it shouldn't contain any 'require' keywords. Did you use Babel with your webpack? Please, show us your WebPack config.
- Your AdminMenu file looks not like module. Your adminMenu file should contain 'export' keyword, after that you will be able to 'require' or 'import' it from other files.
- 看起来，尽管您正在使用 Webpack，但您以错误的方式使用它。在您的最终包（最终 JS 文件）中，它不应包含任何“require”关键字。你在 webpack 中使用了 Babel 吗？请向我们展示您的 WebPack 配置。
- 您的 AdminMenu 文件看起来不像模块。您的 adminMenu 文件应包含“export”关键字，之后您将能够从其他文件“要求”或“导入”它。
Also, you can write questions in comments with Russian if it is more convenient for you
另外，如果方便的话，您可以在评论中用俄语写问题
