シンプルコンポーネントがレンダリングされていません：React js

以下のコードを使用して反応しますが、ブラウザにhtmlの要素がありません。コンソールにエラーはありません。シンプルコンポーネントがレンダリングされていません：React js

<!DOCTYPE html> 
    <html> 
    <head> 
     <title>React without npm</title> 
     <script src="https://unpkg.com/[email protected]/dist/react.js"></script> 
     <script src="https://unpkg.com/[email protected]/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>

誰かがこれを助けてください。

出典

2017-02-08 suyesh

その後、classの内部には、メソッドが呼び出されることはありません飽きlowercase文字でClass name開始に反応した場合、すなわち何もレンダリングせず、小さな文字がHTML要素として扱われるので、あなたは、ブラウザのコンソール、内の任意のエラーメッセージを得ることはありません、すべてのReact componentsは必ずupper caseという文字で始める必要がありますので、常に大文字を使用してください。

reactTestの代わりにこれを使用してください：ReactTestそれは動作します。

DOCを1として：

ユーザー定義コンポーネントは大文字でなければなりません。

要素タイプは小文字で始まる場合、それは<div>又は<span>ような組み込みコンポーネントを参照し、文字列内の結果React.createElementに渡さ「DIV」または「スパン」。大文字の<Foo />で始まるタイプは、React.createElement(Foo)およびにコンパイルされ、JavaScriptファイルで定義またはインポートされたコンポーネントに対応しています。

大文字のコンポーネントに名前を付けることをお勧めします。小文字で始まるコンポーネントがある場合は、それをJSXで使用する前に大文字化された変数に割り当てます。

作業コードを確認します。以下は、正常に動作します

<!DOCTYPE html> <html> <head> <title>React without npm</title> <script src="https://unpkg.com/[email protected]/dist/react.js"></script> <script src="https://unpkg.com/[email protected]/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>

出典

2017-02-08 10:10:36

、それを試してみてください。

 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>

出典

2017-02-08 10:12:36

シンプルコンポーネントがレンダリングされていません：React js

答えて

関連する問題