ReactJs瀏覽器無法讀取的不確定

Question

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') 
); 

運行後

控制檯消息：

Uncaught TypeError: Cannot read property 'keys' of undefined

爲什麼？

Answer 1

我也遇到了同樣的問題，同時在網上衝浪時，我發現我用的babel核心版本有問題。我用另一個替換了它，並讓我的代碼工作。

試試這個

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-standalone包巴貝爾編譯用更新的版本，因爲babel-browser是deprecated。

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