Javascript reactjs无法读取未定义的属性“键”
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/36672007/
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 Cannot read property 'keys' of undefined
提问by NVA
I am learning reactjs through a tutorial and ran into this error. That says "Cannot read property 'keys' of undefined" My code is very minimal so I assume that it has to do with the structure of the language. Does anyone know the problem and a possible solution?
我正在通过教程学习 reactjs 并遇到了这个错误。那就是“无法读取未定义的属性'键'”我的代码非常少，所以我认为它与语言的结构有关。有谁知道问题和可能的解决方案？
<!DOCTYPE html>
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.1/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/6.1.19/browser.min.js"></script>
<title>ReactJs</title>
</head>
<body>
<div id="app"></div>
<script type="text/babel">
var HelloWorld = ReactDOM.createClass({
render: function() {
return
<div>
<h1>Hello World</h1>
<p>This is some text></p>
</div>
}
});
ReactDOM.render(
<HelloWorld />, document.getElementById('app'));
</script>
</body>
</html>
回答by omarjmh
Edit: oddly, after our comments above, I checked to see if it was indeed the babel core version, I am using this one in my fiddle:
编辑：奇怪的是，在我们上面的评论之后，我检查了它是否确实是 babel 核心版本，我在我的小提琴中使用了这个：
https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js
https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js
The second I switch to your version above I get this:
第二个我切换到你上面的版本我得到了这个：
Uncaught TypeError: Cannot read property 'keys' of undefined
Use React.createClassnot ReactDOM.createClassand wrap multiple lines of html in parenthesis like so:
使用React.createClassnotReactDOM.createClass并将多行 html 包裹在括号中，如下所示：
Working Example: https://jsfiddle.net/69z2wepo/38998/
工作示例：https: //jsfiddle.net/69z2wepo/38998/
var Hello = React.createClass({
render: function() {
return (
<div>
<h1>Hello World</h1>
<p>This is some text</p>
</div>
)
}
});
ReactDOM.render(
<Hello name="World" />,
document.getElementById('container')
);
回答by VIBrunazo
Just to be clear, as the other answers are a bit convoluted. The problem was using "babel-core" instead of "babel-standalone". Just look up for a cdn for babel-standalone instead.
只是要清楚，因为其他答案有点令人费解。问题是使用“babel-core”而不是“babel-standalone”。只需查找 babel-standalone 的 CDN。
https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js
回答by Elharony
Today is my first day with React, and I've faced this issue when I tried to use Babel to transpile the JSX!
今天是我使用 React 的第一天，当我尝试使用 Babel 转译 JSX 时遇到了这个问题！
The issue is the version you are trying to use, please use this one instead:
问题是您尝试使用的版本，请改用此版本：
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
Don't forget to write type="text/babel"in the <script>tag which you will write the JSX in to let Babel transpile it for you, if you don't, you will find this error (As I have faced it too! :D):
不要忘记type="text/babel"在<script>标签中写下你将编写 JSX的标签，让 Babel 为你转译它，如果你不这样做，你会发现这个错误（我也遇到过！:D）：
Uncaught SyntaxError: Unexpected token <
Uncaught SyntaxError: Unexpected token <
回答by devDeejay
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>
This is the version of babel-corewhich isn't giving me the error as shown below:
这是babel-core的版本，它没有给我如下所示的错误：
If you want to use the latest version, You can use the latest standalone version. (as per 22-Nov-2018)
如果要使用最新版本，可以使用最新的独立版本。（截至 2018 年 11 月 22 日）
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>
But this gives the following warning :
但这给出了以下警告：
"You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/"
“您正在使用浏览器内的 Babel 转换器。请务必为生产预编译您的脚本 - https://babeljs.io/docs/setup/”
回答by Alex R
I haven't worked with React before, but there are a few things that I see that may be causing your issues. First, React.createClassinstead of ReactDOM.createClass. Second, you need to wrap your html in parentheses:
我之前没有使用过 React，但我发现有一些事情可能会导致您的问题。首先，React.createClass而不是ReactDOM.createClass. 其次，您需要将 html 括在括号中：
var HelloWorld = React.createClass({
render: function() {
return (
<div>
<h1>Hello World</h1>
<p>This is some text></p>
</div>
);
}
});
This should get it working
这应该让它工作
