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

IT技术 javascript reactjs key
2021-04-22 02:23:03

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

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

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

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

Uncaught TypeError: Cannot read property 'keys' of undefined

使用React.createClassnotReactDOM.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')
);
babel 版本必须低于 6.0.0
2021-05-31 02:23:03
Babel 版本 6 给出该错误的任何原因？我也有，然后切换到版本 5.8.24 错误消失了。
2021-06-10 02:23:03
我刚刚遇到了同样的错误，发现我们使用的浏览器的 Babel 版本已被弃用。您可以在浏览器中使用的最新版本是cdnjs.com/libraries/babel-standalone
2021-06-12 02:23:03

只是要清楚，因为其他答案有点令人费解。问题是使用“babel-core”而不是“babel-standalone”。只需查找 babel-standalone 的 CDN。

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

今天是我使用 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 <

<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/ ”

在此处输入图片说明

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

这应该让它工作

其它你可能感兴趣的问题
上一篇Next.js：带状态的 Router.push 下一篇如何指定具有功能组件的构造函数（粗箭头语法）？