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組件不是在簡單的例子中渲染

回答

相關問題