React での JSX 構文の使用法の詳細な説明-jsチュートリアル-php.cn

React での JSX 構文の使用法の詳細な説明

php中世界最好的语言

リリース： 2018-05-24 14:41:04

オリジナル

1769 人が閲覧しました

今回は React での JSX 構文の使用について詳しく説明します。React で JSX 構文を使用する際の注意事項について、実際のケースを見てみましょう。

JSX 構文

コード内で HTML タグをオブジェクトとして使用できる特別な JS 構文シュガー。次の特徴に要約できます:

引用符なし

以前は、HTML タグは JS で使用されていました。は引用符付きの

文字列として使用されますが、jsx 構文では引用符を追加する必要はなく、オブジェクトとして直接使用されます

    var html = <h1>React</h1>;

ログイン後にコピー

タグには対応する終了タグまたは終了タグが必要です:

html 構造この時、対応する終了タグは追加されていませんでしたが、ブラウザは正常に解析できますが、jsx 構文では標準の html 構造を強制的に記述することになります

この段落の html タグは、ブラウザ

    <input type="text" value="React">

ログイン後にコピー

この段落 jsx構文ではエラーが報告されます

    var html = <input type="text" value="React">;

ログイン後にコピー

jsxの正しい書き方はこうあるべきです

    var html = <input type="text" value="React" />;
    var p = <p>React</p>;

ログイン後にコピー

ルートノードは1つしかありません

jsx構文ではトップレベル構造にはノードが 1 つだけ必要であり、兄弟ノードは出現できません

    var html = 
    <p>
        <h1>Tom</h1>
        <h1>Lucy</h2>
    </p>

ログイン後にコピー

いいえタグにコメントを追加します

jsx 構文では、html タグはオブジェクト、データ構造であり、実際の dom ノードや文字列ではないため、コメントタグには追加できません。

以下のコードはタグにコメントを追加するため、エラーが報告されます。

    var html = 
    <p>
        <!--不能添加注释，这里会报错-->
        <h1>Tom</h1>
        <h1>Lucy</h2>
    </p>

ログイン後にコピー

jsx 構文では、HTML タグと

javascript コードの混合が可能です

jsx 構文では、HTML タグ内で js コードを使用する場合は、中かっこ ({expression}) を使用します。

    var name = "DK";
    var style = {fontSize: '12px', color: 'red'};
    var html = <span style={style}>{name}</span>;

ログイン後にコピー

最終的に、上記のコードは

    <span style="font-size:12px; color:red">DK</span>

ログイン後にコピー

React の使用法に解析されます

React はサードパーティのフレームワークライブラリであるため、使用する前に関連するライブラリファイルをインポートする必要があります。

    <!--React 核心库-->
    <script src="../../../../libs/react/react.js"></script>
    <!--React 跟 Dom 相关的功能库-->
    <script src="../../../../libs/react/react-dom.js"></script>
    <!--babel 库，将 JSX 语法转为 JavaScript 语法-->
    <script src="../../../../libs/react/browser.min.js"></script>

ログイン後にコピー

Reactはjsx構文に基づいて実装されているため、スクリプトタイプがtext/babelであることを指定する必要があります

    <script type="text/bebal"></script>

ログイン後にコピー

Reactのコアオブジェクトとメソッドを使用して

、指定されたコンテナにHTMLタグをレンダリングしますReactDOM.render

    <body>
        <p id="p1"></p>
        <p id="p2"></p>
        <p id="p3"></p>
        <!--jsx 语法-->
        <script type="text/babel">
            //将标签直接渲染到容器 p1 当中
            ReactDOM.render(<h1>DK</h1>, document.getElementById('p1'));
            var _style = {fontSize: '12px', color: 'red'};
            var _name = "Tom";
            var _obj = {name: "DK", age: 18};
            //标签与 js 代码混写
            ReactDOM.render(<h1 style={_style}>{_obj.age + (1 + 2)}</h1>, document.getElementById('p2'));
            var array = ["Tom", "Lucy", "Lily"];
            //多级标签和 js 代码混写
            ReactDOM.render(
                <p>
                    <ul>
                        {
                            array.map(function(arg1, arg2){
                                return <li key={arg2}>{arg1}</li>;
                            })
                        }
                    </ul>
                    <ul><li>Sam</li></ul>
                    <ul><li><input type="text" /></li></ul>
                </p>,
                document.getElementById('p3')
            );
        </script>
    </body>

ログイン後にコピー

と思いますこの記事でその事例を読んでください。あなたはこの方法をマスターしました。さらに興味深い情報については、php 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

JSでインターフェースを使用する手順の詳細な説明

PromiseA+の実装手順の詳細な説明

以上がReact での JSX 構文の使用法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。