単純コンポーネントがレンダリングされない:React js

Simple Component is not rendering: React js


質問 written by Mayank Shukla @2018-02-27 19:32:16Z

: 2 : 3 : 1

私は以下のコードを使用して反応するようにしていますが、私はブラウザで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>

誰かがこれを手伝ってください。

回答 1 written by Mayank Shukla @2018-02-22 07:13:20Z
10

React Class namelowercase始まっている場合、 Class name内のメソッドは呼び出されません。つまり、レンダリングは行われません。ブラウザコンソールではエラーメッセージは表示されません。小さい文字はHTML要素として扱われるためです。すべてのReact componentsupper case始めなければならないので、常に大文字を使用してください。

reactTest代わりにreactTest使用してください: ReactTestは動作します。

DOCによると

ユーザー定義コンポーネントは大文字にする必要があります。

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

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

作業コードを確認してください。

<!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 written by Abdennour TOUMI @2017-02-08 10:12:36Z
2

以下はうまくいきます、試してみてください。

      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>

回答 3 written by Denis Rudov @2019-02-12 17:58:00Z
0
const Some = ()=> <div />
<Some />

動作しますが、

will work, but

うまくいかない