ReactJs Cannot read property 'keys' of undefined

大猛
  • 1.3k
<!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?

回复
阅读 5.1k
5 个回答

现在的大部分项目都是用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']}
xgqfrms
  • 17

https://facebook.github.io/re...

Major changes Two Packages: React and React DOM

As we look at packages like react-native, react-art, react-canvas, and react-three, it has become clear that the beauty and essence of React has nothing to do with browsers or the DOM.

To make this more clear and to make it easier to build more environments that React can render to, we’re splitting the main react package into two: react and react-dom. This paves the way to writing components that can be shared between the web version of React and React Native. We don’t expect all the code in an app to be shared, but we want to be able to share the components that do behave the same across platforms.

The react package contains React.createElement, .createClass, .Component, .PropTypes, .Children, and the other helpers related to elements and component classes. We think of these as the isomorphic or universal helpers that you need to build components.

The react-dom package has ReactDOM.render, .unmountComponentAtNode, and .findDOMNode. In react-dom/server we have server-side rendering support with ReactDOMServer.renderToString and .renderToStaticMarkup.
大猛
  • 1.3k
<!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 的解答。

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏