ビギナーズガイドReactProps[構文付き]
公開: 2020-09-16Reactは、アプリケーションのインタラクティブUIを設計するために使用されるMITライセンスのオープンソースJavaScriptライブラリです。 これは、コンポーネントベースの宣言型、柔軟性、および効率的なライブラリであり、開発者の生活を楽にします。 これはコンポーネントベースのライブラリであるため、UIをコンポーネントと呼ばれるいくつかの個別の部分に分割します。 これらのコンポーネントは、適切に機能するために相互に通信する必要があります。そのときに、Reactの小道具が登場します。
目次
React Propsとは何ですか？
「小道具」という言葉は、プロパティを意味するReactライブラリのキーワードです。 これらは、Reactコンポーネントではグローバル変数またはオブジェクトと呼ばれることもあります。 Reactの小道具はHTMLの引数に似ています。 Reactプロップについて注目に値するいくつかのことは、それらが常に一方向に流れ、それらの中のデータが読み取り専用であるということです。 これにより、それらは不変になります。つまり、一方のコンポーネントから流れるデータをもう一方のコンポーネントで変更することはできません。 これは、純粋な関数と不純な関数の例で理解できます。
これは純粋関数であり、同じ入力に対して常に同じ出力を提供します。
関数prod（a、b）{
a*bを返します。
}
これは、独自の入力を操作しているため、不純な関数です。
関数預金（口座、金額）{
account.total+=金額;
}
Reactの小道具は不変であるため、コンポーネントは純粋関数として動作する必要があります。 これが、柔軟なReactライブラリの唯一の厳密なルールです。
Reactプロップを渡したりアクセスしたりするための構文
前述のように、Reactの小道具はHTML引数に似ているため、コンポーネントに小道具を渡したり追加したりするには、HTML属性を渡すのと同じように行うことができます。
構文：
<component_name props_name =“ value” />
上記の構文では、「 component_name」は小道具を渡す必要のあるコンポーネントの名前、 props_nameは小道具の名前、 valueは小道具の値です。
コンポーネントのクラス内から任意の小道具にアクセスできます。
構文：
this.props .props_name;
上記の構文では、this.propsは、コンポーネントのクラス内から任意のプロップにアクセスするために使用されるグローバルオブジェクトであり、 props_nameは、アクセスするReactプロップの名前です。
読む： JavaScriptとJQuery：JavaScriptとJQueryの違い
Reactプロップの使い方は？
コンポーネントで不変のReactプロップデータを使用するには、2つの異なる方法があります。 これらの2つの方法は、メインファイルのreactDom.render（）関数に小道具を追加するか、コンポーネント自体にデフォルトの小道具としてデータを追加することです。 Reactプロップを両方の方法で使用する方法は次のとおりです。
react.Dom.render（）関数からのReactプロップの使用
まず、コンポーネントファイルに小道具を追加する必要があります。
'react'からReactをインポートします。 //Reactライブラリをインポートする
class例extendsReact.component{/ *例は、Reactコンポーネントクラスのプロパティを拡張しているコンポーネント名です* /
与える（） {
戻る （
<div>
<h2>{this.props。 h2のfirstProp }</h2>
<h3> {this、props。 h3のsecondProp }</h3>
</ div>
）;
}
}
デフォルトの例をエクスポートします。 //コンポーネントをエクスポートします
次に、メインファイルのreactDom.render（）関数を介して小道具に値を追加し、そこからアクセスする必要があります。
'react'からReactをインポートします。
'react-dom'からReactDomをインポートします。
'./Example.jsx'から例をインポートします。
ReactDom.render（<例 firstProp =“これはfirstPropです” secondProp =“これはsecondPropです” />、document.getElementById（'example '））;
デフォルトの例をエクスポートします。
結果：
これはh2のfirstPropです
これはh3のsecondPropです
コンポーネントコンストラクターでのデフォルトのプロップでのReactプロップの使用
小道具とその値をコンポーネントファイルに追加します。
'react'からReactをインポートします。 //Reactライブラリをインポートする
class例extendsReact.component{/ *例は、Reactコンポーネントクラスのプロパティを拡張しているコンポーネント名です* /
与える（） {
戻る （
<div>
<h2>{this.props。 firstProp } </ h2>
<h3> {this、props。 secondProp } </ h3>
</ div>
）;
}
}
例.deafultProps={
firstProp ：「これはfirstPropです」、
secondProp ：「これはsecondPropです」
}
デフォルトの例をエクスポートします。 //コンポーネントをエクスポートします
メインファイルからReactプロップにアクセスします。
'react'からReactをインポートします。
'react-dom'からReactDomをインポートします。
'./Example.jsx'から例をインポートします。
ReactDom.render（<例/>、document.getElementById（'example '））;
この出力は、reactDom.render（）関数の使用法と似ていますが、今回はデフォルトの小道具を使用して実行される点が異なります。
チェックアウト： VueとReact：VueとReactの違い
あるコンポーネントから別のコンポーネントにReactプロップを渡す方法
Reactプロップの主な用途は、Reactのコンポーネント間でデータを渡すことです。 次の例は、データがどのように渡されるかを理解するのに役立ちます。
'react'からReactをインポートします。
クラスFruitはReact.Componentを拡張します{
与える（） {
return<h4>私は{this.props。 h4の名前}</h4>
}
}
クラスQuestionはReact.Componentを拡張します{
与える（） {
戻る （
<div>
<h3>あなたはどの果物ですか？ h3で</h3>
<フルーツ名=「マンゴー」/ >//小道具を作成して値を割り当てる
</ div>
）;
}
}
ReactDom.render（<Question />、document.getElementById（'fruit'））;
これにより、次の出力が得られます。
あなたはどの果物ですか？ h3で
私はh4のマンゴーです
州と小道具を一緒に使用する
Reactは動的言語であり、その柔軟性はUSPであることは誰もが知っています。 したがって、アプリケーションの開発では、Reactプロップを単独で使用するだけでは不十分です。 この問題は、州の助けを借りて解決されています。 状態は、データの管理に使用されるもう1つのReact機能です。 Reactの小道具と状態を組み合わせて、アプリケーションをよりインタラクティブで動的にする方法を見てみましょう。
'react'からReactをインポートします。
クラスCarはReact.Componentを拡張します{
コンストラクター（小道具）{
スーパー（小道具）;
this.state = {
firstCar：「これはメルセデスベンツです！ 「h2」では、//状態に値を割り当てます
secondCar：「これはBMWです！ In h3”//状態に値を割り当てる
}
}
与える（） {
戻る （
<div>
<FirstCar firstProp = {this.state.firstCar}/>//小道具に値を割り当てる
<SecondCar secondProp = {this.state.secondCar}/>//小道具に値を割り当てる
</ div>
）;
}
}
クラスFirstCarはReact.Componentを拡張します{
与える（） {
戻る （
<div>
<h2> {this.props.firstProp} </ h2>
</ div>
）;
}
}
クラスSecondCarはReact.Componentを拡張します{
与える（） {
戻る （
<div>
<h3> {this.props.secondProp} </ h3>
</ div>
）;
}
}
デフォルトの車をエクスポートします。
次に、メインファイルからデータにアクセスする必要があります。
'react'からReactをインポートします。
'react-dom'からReactDOMをインポートします。
'./Car.jsx'からCarをインポートします。
ReactDOM.render（<Car />、document.getElementById（'car'））;
結果：
これはメルセデスベンツです！ h2で
これはBMWです！ h3で
また読む： NodeJSとReactJSの違い
まとめる
Reactの小道具とReactのデータを管理するための状態の両方を組み合わせることで、Reactは最も便利なJavaScriptライブラリの1つになります。 そこにはたくさんのReactプロジェクトのアイデアがあり、開発者だけがそれらに命を吹き込むことができます。 したがって、ReactJS開発者には優れた需要があり、給与も増加しています。
企業がアプリケーションを作成するのを助け、莫大な収入を得るために多数のReactプロジェクトに取り組むというアイデアがあなたを興奮させるなら、手遅れになる前に行動を起こす時が来ました。 upGradが提供するオンラインコースを受講して、Reactのすべてを学び、フルスタックソフトウェア開発者になることができます。
反応、フルスタック開発について詳しく知りたい場合は、upGrad＆IIIT-Bのフルスタックソフトウェア開発のPGディプロマをチェックしてください。これは、働く専門家向けに設計されており、500時間以上の厳格なトレーニング、9以上のプロジェクトを提供します。と割り当て、IIIT-B卒業生のステータス、実践的な実践的なキャップストーンプロジェクト、トップ企業との仕事の支援。