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') );
运行后的控制台消息:
未捕获的TypeError:无法读取未定义的属性“键”
为什么?
我也遇到了同样的问题,在浏览互联网时,我发现我使用的babel-core版本存在问题。我用另一个替换了它,并使我的代码正常工作。
试试这个
的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是,您可以将软件包用于更高版本的babel编译deprecated。
babel-standalone
babel-browser
deprecated
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>