phpstudy集成环境

 首页 > ReactJs Cannot read property 'keys' of undefined

ReactJs Cannot read property 'keys' of undefined

<!DOCTYPE html>
<html>

<head>
    <title>ex 1</title>
</head>

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

</html>

ex1.jsx code:

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

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

console message after run:Uncaught TypeError: Cannot read property 'keys' of undefined

Why?

现在的大部分项目都是用babel6去转换的，所以建议题主也换成babel6，方法如下：

新建.babelrc文件

touch .babelrc

写入依赖

{
    "presets: ["es2015", "react", "stage-0"]
}

安装依赖

npm i babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0 -D

最后配置webpack，加载babel-loader

{test: /.js/, loaders: ['babel']}
<!DOCTYPE html>
<html>

<head>
    <title>ex 1</title>
</head>

<body>
    <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/5.8.34/browser.min.js"></script>
    <script type="text/babel">
        var HelloWord = React.createClass({
            render: function () {
                return (
                    <div>
                        <p>Hello Word!</p>
                    </div>
                );
            }
        });

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

</html>

babel-core引用的版本太高了，官方教程引用的版本是5.8.24，我试了一下，引用到6.x就会报错，还是希望达人能处理一下高版本存在的问题，这个提问我不会选择已解决，因为此解决方式不是完美的解决方式，这个答案也不是可以解答问题的答案，只是暂时可以解决问题而已。

根据 @qianjiahao 的回答，整理了一下不使用webpack的解决方案。

1、全局安装babel-cli

npm install -g babel-cli

2、npm初始化项目

npm init

根据提示完成初始化

3、安装babel-preset-es2015、babel-preset-react

npm install -save babel-preset-es2015 babel-preset-react

4、制作build脚本

修改项目目录下package.json中scripts配置项

"scripts": {
    "build": "babel ex1.jsx -o ex1.js"
},

说明：ex1.jsx为react代码文件，ex1.js为页面引用的js文件，即转义后的js文件

5、创建编辑.babelrc文件

在项目目录下创建.babelrc文件，并编辑如下代码：

{
    "presets": [
            "es2015",
            "react"
        ]
}

6、执行转义

npm run build

或者在终端直接执行

babel ex1.jsx -o ex1.js

在项目目录中会出现ex1.js

附：修改后的示例代码

html代码

<!DOCTYPE html>
<html>

<head>
    <title>ex 1</title>
</head>

<body>
    <div id="content"></div>
    <script src="build/react.min.js"></script>
    <script src="build/react-dom.min.js"></script>
    <script src="ex1.js"></script>
</body>

</html>

jsx代码

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

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

babel转义后的js代码

'use strict';

var HelloWord = React.createClass({
    displayName: 'HelloWord',

    render: function render() {
        return React.createElement(
            'div',
            null,
            React.createElement(
                'p',
                null,
                'Hello Word!'
            )
        );
    }
});

ReactDOM.render(React.createElement(HelloWord, null), document.getElementById('content'));

再次感谢 @qianjiahao

此问题解决，如果使用webpack工具，请参照答案中 @qianjiahao 的解答。

【热门文章】
【热门文章】