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

NVA*_*NVA 33 javascript key reactjs

我正在通过教程学习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>
Run Code Online (Sandbox Code Playgroud)

Jor*_*rix 38

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

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

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

Uncaught TypeError: Cannot read property 'keys' of undefined
Run Code Online (Sandbox Code Playgroud)

使用React.createClassnot 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')
);
Run Code Online (Sandbox Code Playgroud)

  • 任何理由为什么Babel版本6给出了这个错误?我也有它然后切换到版本5.8.24错误消失了. (10认同)
  • 我刚才遇到了同样的错误,发现我们使用的浏览器的Babel版本已被弃用.您可以在浏览器中使用的最新版本是https://cdnjs.com/libraries/babel-standalone (2认同)

VIB*_*azo 9

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

https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js
Run Code Online (Sandbox Code Playgroud)