単純な例でレンダリングされていない反応コンポーネント

"Hi"が表示されると予想していますが、エラーは発生していないと考えられ、画面には何も表示されません。助けてください！ MYAPP単純な例でレンダリングされていない反応コンポーネント

<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で始まり、小文字をHTML要素、そのAとして扱われるので、あなたは、ブラウザconsole内の任意のエラーメッセージを取得しない場合すべて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

メートル大文字なければなりません。

あなたのコードは次のようにする必要があります：

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 –

単純な例でレンダリングされていない反応コンポーネント

答えて

関連する問題