ReactJs浏览器无法读取未定义的属性“键”

问题描述

HTML代码：

<div id="content"></div>

<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="https://cdn.bootcss.com/babel-core/6.1.19/browser.min.js"></script>
<script src="ex1.jsx" type="text/babel"></script>

JSX代码：

// create class
var HelloWord = React.createClass({
    render: function () {
        return (
            <div>
                <p>Hello Word!</p>
            </div>
        );
    }
});

// show content
ReactDOM.render(
    <HelloWord></HelloWord>, document.getElementById('content')
);

运行后的控制台消息：

为什么？

推荐答案

我也遇到了同样的问题，在上网时我发现我使用的babel-core版本存在问题。我将其替换为另一个并让我的代码工作。

I also ran into the same issue and while surfing the internet I found that there was a problem with the babel-core version that I used. I replaced that with another and got my code to work.

试试这个

HTML

<div id="content"></div>

<script src="build/react.min.js"></script>
<script src="build/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<script src="ex1.jsx" type="text/babel"></script>

JSX

var HelloWord = React.createClass({
    render: function () {
        return (
            <div>
                <p>Hello Word!</p>
            </div>
        );
    }
});

// show content
ReactDOM.render(
    <HelloWord></HelloWord>, document.getElementById('content')
);

它也适合你。

更新：

您可以使用 babel-独立使用较新版本进行babel编译的软件包，因为 babel-browser 已弃用。

You can use babel-standalone package for babel compilation with the newer version since babel-browser is deprecated.

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

这篇关于ReactJs浏览器无法读取未定义的属性“键”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！