Question

reactjs 无法读取未定义的属性“keys”

2016-04-17

28442

javascript reactjs key

我正在通过教程学习 reactjs，遇到了这个错误。上面写着“无法读取未定义的属性‘keys’”我的代码非常少，所以我认为它与语言的结构有关。有人知道这个问题和可能的解决方案吗？

   <!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>

Answer 1

编辑：奇怪的是，在我们上面的评论之后，我检查了一下它是否确实是 babel 核心版本，我在我的 fiddle 中使用了这个：

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')
);

Answer 2

为了清楚起见，因为其他答案有点复杂。问题在于使用“babel-core”而不是“babel-standalone”。只需查找 babel-standalone 的 cdn 即可。

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

Answer 3

今天是我使用 React 的第一天，当我尝试使用 Babel 转译 JSX 时遇到了这个问题！

问题出在你尝试使用的版本上，请使用这个版本：

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

不要忘记在 <script> 标签中写入 type="text/babel" ，你将在其中写入 JSX 以让 Babel 为你转译它，如果你不这样做，你会发现这个错误 （因为我也遇到过它！:D） ：

Uncaught SyntaxError: Unexpected token <