React组件不渲染:React js

我正在使用下面的代码做反应,但我没有在浏览器中获取HTML元素。 控制台中没有错误。

<!DOCTYPE html> <html> <head> <title>React without npm</title> <script src="https://unpkg.com/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> 

有人可以帮助这个。

2 Solutions collect form web for “React组件不渲染:React js”

如果一个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="https://unpkg.com/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="https://cdnjs.cloudflare.com/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> 
  • 使用babel后,IE中的'Symbol'是未定义的
  • React-js忽略标签的“for”属性
  • 在Sublime Text 3中,如何为EmX启用JSX文件?
  • 与Redux的反应? 那么“背景”问题呢?
  • 由于webpack中的CSS,摩卡testing失败
  • 在React Native中查看父级的80%宽度
  • 在js中触发onchange事件的最好方法是什么?
  • 如何使用连接w / Redux从this.props获得简单的调度?
  • Reactfunction无状态组件,PureComponent,组件; 有什么区别,什么时候应该用什么?
  • 为什么我们需要在Redux中使用asynchronousstream的中间件?
  • 未被捕获的错误:不变的违规:元素types是无效的:期望一个string(对于内置组件)或一个类/函数,但得到:对象