reactjs无法读取属性'键'未定义的

时间:2016-04-17 02:20:05

标签: javascript reactjs key

我正在通过教程学习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>

5 个答案:

答案 0 :(得分:38)

编辑:奇怪的是,在我们上面的评论之后,我检查了它是否确实是babel核心版本,我在我的小提琴中使用这个:

https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js

第二个我切换到你上面的版本我得到了这个:

Uncaught TypeError: Cannot read property 'keys' of undefined

使用React.createClass而不是ReactDOM.createClass并在括号中包含多行html,如下所示:

工作示例: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')
);

答案 1 :(得分:5)

需要明确的是,其他答案有点令人费解。问题是使用&#34; babel-core&#34;而不是&#34; babel-standalone&#34;。只需要查找一个用于babel-standalone的cdn。

https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js

答案 2 :(得分:3)

今天是我使用React的第一天,当我尝试使用Babel来转换JSX时,我遇到了这个问题!

问题是您尝试使用的版本,请改用此版本:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>

不要忘记在type="text/babel"标签中写<script>,你将把JSX写进来让Babel为你翻译,如果你没有,你会发现这个错误(正如我所面对的那样!:D)

Uncaught SyntaxError: Unexpected token <

答案 3 :(得分:0)

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>

这是 babel-core 的版本,没有出现以下错误:

如果要使用最新版本,则可以使用最新独立版本。 (根据2018年11月22日)

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.24.0/babel.js"></script>

但这给出以下警告:

“您正在使用浏览器中的Babel转换器。请确保预先编译用于生产的脚本-https://babeljs.io/docs/setup/

enter image description here

答案 4 :(得分:-3)

我之前没有和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>
    );
  }
});

这应该让它运作