React组件不渲染：React js
我正在使用下面的代码做反应，但我没有在浏览器中获取HTML元素。 控制台中没有错误。
<!DOCTYPE html> <html> <head> <title>React without npm</title> <script src="react@15/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script> </head> <body> <div id="test"></div> <script type="text/babel"> var reactTest = React.createClass({ render: function(){ return( <h1>React Without NPM</h1> ); } }); ReactDOM.render(<reactTest />,document.getElementById('test')); </script> </body> </html> 有人可以帮助这个。
如果一个React Class name以一个lowercase字母开头，那么这个class里面的任何方法都不会被调用，也就是说什么都不渲染，而且在浏览器控制台中也没有任何错误信息，因为小字母被当作HTML元素来处理，所有React components必须以upper case字母开头，因此请始终使用大写字母。
ReactTest会起作用，而不是reactTest 。
根据DOC ：
用户定义的组件必须被大写。
当元素types以小写字母开头时，它指向一个像or这样的内置组件，并导致传递给React.createElement的string“div”或“span”。 以大写字母开头的types，例如编译为React.createElement（Foo），对应于JavaScript文件中定义或导入的组件。
我们build议用大写字母命名组件。 如果您确实有一个以小写字母开头的组件，则在将它用于JSX之前，将其分配给大写variables。
检查工作代码：
<!DOCTYPE html> <html> <head> <title>React without npm</title> <script src="react@15/dist/react.js"></script> <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.js"></script> </head> <body> <div id="test"></div> <script type="text/babel"> var ReactTest = React.createClass({ render: function(){ return( <h1>React Without NPM</h1> ); } }); ReactDOM.render(<ReactTest />,document.getElementById('test')); </script> </body> </html>
以下工作正常，尝试一下：
var ReactTest = React.createClass({ render: function(){ return( <h1>React Without NPM</h1> ); } }); ReactDOM.render(<ReactTest />,document.getElementById('test'));
<script src="ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="test" ></div>
