React组件不是在简单的例子中渲染

我期待看到“嗨”，但认为没有得到任何错误，也没有任何东西在屏幕上呈现。请帮忙！React组件不是在简单的例子中渲染

<html> 
 
    <head> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script> 
 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
 

 
    </head> 
 
    <body> 
 

 
     <div id="div1"></div> 
 

 
     <script type="text/babel"> 
 

 
      function myApp(){ 
 
       return <h1>Hi</h1>; 
 
      } 
 

 
      var elem = (
 
       <div> 
 
\t    <myApp /> 
 
       </div> 
 
      ); 
 

 
      ReactDOM.render(elem, document.getElementById('div1')); 
 

 
     </script> 
 
     </div> 
 
    </body> 
 
</html>

来源

2017-04-20 Deadpool

您需要使用MyApp而不是myApp。

原因：

如果React组件名称与lowercase letter，没什么Renders开始，你不要在浏览器中console收到任何错误消息，因为小写字母作为HTML元素，它是一种治疗规定所有React组件必须以大写字母开头。

检查工作示例：

<html> 
 
    <head> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react.min.js"></script> 
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.5.4/react-dom.min.js"></script> 
 
     <script src="http://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script> 
 

 
    </head> 
 
    <body> 
 

 
     <div id="div1"></div> 
 

 
     <script type="text/babel"> 
 

 
      function MyApp(){ 
 
       return <h1>Hi</h1>; 
 
      } 
 

 
      var elem = (
 
       <div> 
 
\t    <MyApp /> 
 
       </div> 
 
      ); 
 

 
      ReactDOM.render(elem, document.getElementById('div1')); 
 

 
     </script> 
 
     </div> 
 
    </body> 
 
</html>

来源

2017-04-20 07:19:03

对myApp的m必须为大写。

您的代码应该是这样的：

function MyApp(){ 
    return <h1>Hi</h1>; 
} 
var elem = (
    <div> 
     <MyApp /> 
    </div> 

);

来源

2017-04-20 07:16:11

我不认为会有所作为。它唯一的语义和非功能性问题。 – Deadpool

它有所作为。在JSX中，小写标签名称被认为是HTML标签。但是，带小点（属性访问器）的小写标签名不是。 –

你可以看到这里：http://stackoverflow.com/questions/30373343/reactjs-component-names-must-begin-with-capital-letters –

React组件不是在简单的例子中渲染

回答

相关问题