React学習メモ(2) JSX_html/css_WEB-ITnoseを理解する
Abstract
JSX (JavaScriptXML) は、JavaScript で宣言型 XML を記述する方法を提供します。JSX を使用すると、単純な JSX 構文変換が可能になります。
はじめに
JSX は、JavaScript コードで XML を直接記述するようなものです。React では、JSX の使用を公式に推奨しています。純粋な JavaScript コードが好きなら問題ありませんが、JSX を使用すると次のような利点があります:
として使用されるのではなく、関心を分離するために使用されます。React を使用してアプリケーションを開発するプロセスでは、HTML タグとコードの間にギャップが生じることがよくあります。これらのタグを生成するコードは、密接な内部接続により、実際にはコンポーネントとして理解できます。コンポーネントは、表示ロジックを処理するテンプレートや
- はネイティブ JavaScript です。直感的です。
- は、よりセマンティックでわかりやすいタグを提供します。
- は、HTML 要素ツリーを定義するために使い慣れた構文を使用できます。 🎜>
HTML タグとこれらのタグを生成するコードはいつでも制御できます。- 最初のコンポーネントを定義します
- コンポーネントの簡単な理解は次のとおりです。データを理解し、メソッドを単純にカプセル化する目的は、関数をモジュール化することです。 React では、
最初のコンポーネントを定義する簡単なデモを見てみましょう。前のゲーム ルールに従って、「HelloWorld」というエレガントで大げさな名前を付けます (React インストール パッケージは公式 Web サイトにアクセスしてダウンロードできます)。 ):
上記の例に関するいくつかの注意点
:
<!DOCTYPE html><html> <head> <title>Hello React</title> <!--React核心库--> <script src="build/react.js"></script> <!--react-dom.js提供与DOM相关功能--> <script src="build/react-dom.js"></script> <!--browser.js将 JSX 语法转为 JavaScript 语法--> <script src="build/browser.min.js">/script> </head> <body> <HelloWorld>Hello World!</HelloWorld> <!--为了把 JSX 转成标准的 JavaScript，我们用 `<script type="text/babel">` 标签，然后通过Babel转换成在浏览器中真正执行的内容--> <script type="text/babel"> // 定义组件HelloWorld var HelloWorld = React.createClass({ render : function(){ return ( <div> <h1>this.props.children</h1> </div> ); } }) </script> </body></html>React のコンポーネント名は先頭が大文字である必要があります。
React のコンポーネントにはトップレベルのタグを 1 つだけ含めることができます。そうでないとエラーが報告されます。JSX は 2 つの中括弧 {...} の間のコンテンツを動的値としてレンダリングします。括弧は、コンテンツを評価してタグ内の複数のノードとしてレンダリングする JavaScript コンテキストを示します。
JSX を使用するかどうかに関係なく、HelloWorld コンポーネントの最終的なページレンダリング結果は、以下に示すように同じです。- this.props.children は、開始タグと終了タグを保存するコンポーネントの特別なプロパティです。上記の例では、間のすべての子ノード this.props.children = ["Hello World!"];
- 上記のコードが JSX 構文を使用しない場合は、次のように記述されます。
JSX と JSX の違いは何ですか? HTML
...// 定义组件HelloWorldvar HelloWorld = React.createClass({displayName:"HelloWorld ", render : function(){ return ( React.createElement("div",null); React.createElement("h2",null,this.props.children); ); }})..." この仕様 (JSX) は、XML または HTML 仕様に準拠しようとするものではありません。JSX は ECMAScript 機能として設計されています。人々が JSX が XML に似ていると考えるという事実については、それは単に人々がそう思っているだけです。 XML の方がよく知られています。" - 上。内容は http://facebook.github.io/jsx/
<div> <h1>Hello World!</h1></div>
属性
HTML では、このメソッドのサポートに基づいて、タグの属性を動的に設定することもサポートしています。 ..} 前回のデモでは、属性値を JS 変数または関数として定義できます。以下に示すように:
React によるコンポーネントのレンダリングのプロセス中に、上で定義した変数と関数が評価され、最終的に生成された DOM 構造はこの新しい状態を反映します。
非 DOM 属性
<!--在HTML中标签属性示例--><div id="demo" class="myStyle"></div><!--在JSX中标签属性示例-->var demoId = this.props.id;var demoClass = "myStyle";function getName(){ ...}<div id={demoId} name={this.getName()} className={demoClass}></div>
key: コンポーネントを一意に識別するために使用されるオプションの一意の識別子。 🎜>
ref: 親コンポーネントがレンダリングの外部で子コンポーネントへの参照を維持できるようにします。
dangerouslySetInnerHtml: 主に DOM 文字列ライブラリ統合を生成できるように、純粋な HTML 文字列を挿入する機能を提供します。 。プログラムの実行中に、ユーザーとアプリケーション間の対話により、コンポーネント ツリー内のコンポーネントの位置が変更される可能性が最も高い例は次のとおりです。リストにレコードを追加したり、削除したりする操作です。もちろん、この場合、コンポーネントを破棄して再作成する必要はないかもしれません。
- これらの特別な属性の機能を詳しく見てみましょう。
キー
コンポーネントに一意の識別子を設定し、レンダリング サイクル全体を通じて一貫性を保つことにより、React はどのコンポーネントを再利用するか、コンポーネントを破棄して再作成するかをインテリジェントに決定して、パフォーマンスを向上させるための不必要な再レンダリングを回避します。
リファレンス (ref) JSX では、属性に目的の参照名を設定することで参照を定義できます。
これで、コンポーネント内のどこでもこの参照を使用できるようになります。参照によって取得されたオブジェクトは、
サポート インスタンス と呼ばれます。これは実際の DOM ではなく、必要に応じて React によって作成される記述オブジェクトです。 this.refs.theInput.getDomNode() を通じて実際の DOM ノードにアクセスできます。
设置原始的HTMLdangerouslySetInnerHTML—— 顾名思义，从属性名当中就能看出来，以此来警告它的值（ 一个对象而不是字符串 ）应该被用来表明净化后的数据。在彻底的理解安全问题后果并正确地净化数据之后，生成只包含唯一 key __html 的对象，并且对象的值是净化后的数据，示例如下：
function createMarkup() { return {__html: 'First · Second'}; };<div dangerouslySetInnerHTML={createMarkup()} />这么做的意义在于，当你不是有意地使用
时候，它并不会被渲染，因为 getUsername() 返回的格式是 字符串 而不是一个{__html: ''} 对象。{__html:...} 背后的目的是表明它会被当成 "type/taint" 类型处理。 这种包裹对象，可以通过方法调用返回净化后的数据，随后这种标记过的数据可以被传递给dangerouslySetInnerHTML。 基于这种原因，我们不推荐写这种形式的代码：这个功能主要被用来与 DOM 字符串操作类库一起使用，所以提供的 HTML 必须要格式清晰（例如：传递 XML 校验 ）
注释
由于JSX本质上就是JavaScript，因此也支持JavaScript的注释方式，在JSX中可以用以下两种方式添加注释：
- 当做一个元素的子节点；
- 内联在元素的属性中；
示例如下：
// 作为一个元素的子节点<div>{/*多行注释*/}<h1>This is a h1 tag.</h1></div>// 内联在元素的属性中<div><h1/* * 多行注释 */ > 多行注释 </h1></div><div><h1//单行注释 >单行注释</h1></div>特殊属性
由于JSX会转化为JavaScript函数，所以有些关键词我们不可以使用，比如for和class。
这两个属性分别可以用htmlFor和className替换，参考如下示例：
<label htmlFor="name" ...><input calssName={classes} ...>样式
React把所有的内联样式都规范化为驼峰形式，同样类似于JavaScript中DOM的style属性，要给组件添加自定义属性，如下：
var styles = { width:100px; height:100px;}React.renderComponent({<div style={styles}>...</div>,node})参考
【1】《React引领未来的用户界面开发框架》【2】 React中文官网
ホットAIツール
Undresser.AI Undress
リアルなヌード写真を作成する AI 搭載アプリ
AI Clothes Remover
写真から衣服を削除するオンライン AI ツール。
Undress AI Tool
脱衣画像を無料で
Clothoff.io
AI衣類リムーバー
AI Hentai Generator
AIヘンタイを無料で生成します。
人気の記事
ホットツール
メモ帳++7.3.1
使いやすく無料のコードエディター
SublimeText3 中国語版
中国語版、とても使いやすい
ゼンドスタジオ 13.0.1
強力な PHP 統合開発環境
ドリームウィーバー CS6
ビジュアル Web 開発ツール
SublimeText3 Mac版
神レベルのコード編集ソフト（SublimeText3）
ホットトピック
7343
9
1627
14
1352
46
1265
25
1214
29
公式アカウントのキャッシュの更新の難しさ：バージョンの更新後のユーザーエクスペリエンスに影響を与える古いキャッシュを回避する方法は？
Mar 04, 2025 pm 12:32 PM
公式アカウントのWebページはキャッシュを更新します。これはシンプルでシンプルで、ポットを飲むのに十分な複雑です。あなたは公式のアカウントの記事を更新するために一生懸命働きましたが、ユーザーはまだ古いバージョンを開くことができますか？この記事では、この背後にあるtwist余曲折と、この問題を優雅に解決する方法を見てみましょう。それを読んだ後、さまざまなキャッシュの問題に簡単に対処でき、ユーザーが常に新鮮なコンテンツを体験できるようになります。最初に基本について話しましょう。それを率直に言うと、アクセス速度を向上させるために、ブラウザまたはサーバーはいくつかの静的リソース（写真、CSS、JSなど）やページコンテンツを保存します。次回アクセスするときは、もう一度ダウンロードすることなく、キャッシュから直接検索できます。自然に高速です。しかし、このことは両刃の剣でもあります。新しいバージョンはオンラインです、
WebページのPNG画像にストローク効果を効率的に追加する方法は？
Mar 04, 2025 pm 02:39 PM
この記事では、CSSを使用したWebページへの効率的なPNG境界追加を示しています。 CSSはJavaScriptやライブラリと比較して優れたパフォーマンスを提供し、微妙または顕著な効果のために境界幅、スタイル、色を調整する方法を詳述していると主張しています
HTML5フォーム検証属性を使用してユーザー入力を検証するにはどうすればよいですか？
Mar 17, 2025 pm 12:27 PM
この記事では、ブラウザのユーザー入力を直接検証するために、必要、パターン、MIN、MAX、および長さの制限などのHTML5フォーム検証属性を使用して説明します。
＆lt; datalist＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:33 PM
この記事では、HTML＆lt; Datalist＆GT;について説明します。オートコンプリートの提案を提供し、ユーザーエクスペリエンスの改善、エラーの削減によりフォームを強化する要素。
HTML5のクロスブラウザー互換性のベストプラクティスは何ですか？
Mar 17, 2025 pm 12:20 PM
記事では、HTML5クロスブラウザーの互換性を確保するためのベストプラクティスについて説明し、機能検出、プログレッシブエンハンスメント、およびテスト方法に焦点を当てています。
＆lt; meter＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:35 PM
この記事では、html＆lt; meter＆gt;について説明します。要素は、範囲内でスカラーまたは分数値を表示するために使用され、Web開発におけるその一般的なアプリケーション。それは差別化＆lt; Meter＆gt; ＆lt; Progress＆gt;およびex
＆lt; Progress＆gt;の目的は何ですか 要素？
Mar 21, 2025 pm 12:34 PM
この記事では、HTML＆lt; Progress＆gt;について説明します。要素、その目的、スタイリング、および＆lt; meter＆gt;との違い要素。主な焦点は、＆lt; Progress＆gt;を使用することです。タスクの完了と＆lt; Meter＆gt; statiの場合
HTML5＆lt; time＆gt;を使用するにはどうすればよいですか 日付と時刻を意味的に表す要素？
Mar 12, 2025 pm 04:05 PM
この記事では、html5＆lt; time＆gt;について説明します。セマンティックデート/時刻表現の要素。 人間の読み取り可能なテキストとともに、マシンの読みやすさ（ISO 8601形式）のDateTime属性の重要性を強調し、Accessibilitを増やします
