可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

I am learning reactjs through a tutorial and ran into this error. That says "Cannot read property 'keys' of undefined" My code is very minimal so I assume that it has to do with the structure of the language. Does anyone know the problem and a possible solution?

   <!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>

回答1:

Edit: oddly, after our comments above, I checked to see if it was indeed the babel core version, I am using this one in my fiddle:

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

The second I switch to your version above I get this:

Uncaught TypeError: Cannot read property 'keys' of undefined

Use React.createClass not ReactDOM.createClass and wrap multiple lines of html in parenthesis like so:

Working Example: 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')
);

回答2:

Just to be clear, as the other answers are a bit convoluted. The problem was using "babel-core" instead of "babel-standalone". Just look up for a cdn for babel-standalone instead.

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

回答3:

Today is my first day with React, and I've faced this issue when I tried to use Babel to transpile the JSX!

The issue is the version you are trying to use, please use this one instead:

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

Don't forget to write type="text/babel" in the <script> tag which you will write the JSX in to let Babel transpile it for you, if you don't, you will find this error (As I have faced it too! :D):

Uncaught SyntaxError: Unexpected token <

回答4:

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script>

This is the version of babel-core which isn't giving me the error as shown below:

If you want to use the latest version, You can use the latest standalone version. (as per 22-Nov-2018)

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

But this gives the following warning :

"You are using the in-browser Babel transformer. Be sure to precompile your scripts for production - https://babeljs.io/docs/setup/"

回答5:

I haven't worked with React before, but there are a few things that I see that may be causing your issues. First, React.createClass instead of ReactDOM.createClass. Second, you need to wrap your html in parentheses:

var HelloWorld = React.createClass({
  render: function() {
    return (
      <div>
        <h1>Hello World</h1>
        <p>This is some text></p>
      </div>
    );
  }
});

This should get it working