ホームページ > 記事 > ウェブフロントエンド > React での JSX 構文の使用法の詳細な説明
React での JSX 構文の使用法の詳細な説明
- php中世界最好的语言オリジナル
- 2018-05-24 14:41:041766ブラウズ
今回は 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 サイトの他の関連記事に注目してください。 推奨読書:
以上がReact での JSX 構文の使用法の詳細な説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。