问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

ReactJs Cannot read property 'keys' of undefined

头像
大猛
    1.3k2412
    <!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?

    react
    阅读 6.5k
    5 个回答
    得票最新
    头像
    qianjiahao
      8.4k73136
      ✓ 已被采纳

      现在的大部分项目都是用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']}
      头像
      大猛
        1.3k2412
        <!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 的解答。

        头像
        xgqfrms
          1719

          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.
          头像
          Coins
            1311
            撰写回答
            你尚未登录，登录后可以
            • 和开发者交流问题的细节
            • 关注并接收问题和回答的更新提醒
            • 参与内容的编辑和改进，让解决方法与时俱进
            推荐问题