Reactjs-props-overview
提供:Dev Guides
ReactJS-小道具の概要
stateとpropsの主な違いは、 props が不変であることです。 これが、コンテナコンポーネントが更新および変更可能な状態を定義する必要があるのに対し、子コンポーネントはpropsを使用して状態からのデータのみを渡す必要があるためです。
小道具の使用
コンポーネントに不変データが必要な場合は、 main.js の* reactDOM.render()*関数に小道具を追加して、コンポーネント内で使用するだけです。
App.jsx
main.js
これにより、次の結果が生成されます。
デフォルトの小道具
また、* reactDom.render()*要素に追加する代わりに、コンポーネントコンストラクターでデフォルトのプロパティ値を直接設定することもできます。
App.jsx
main.js
出力は以前と同じです。
状態と小道具
次の例は、アプリで state とpropsを組み合わせる方法を示しています。 親コンポーネントに状態を設定し、 props を使用してコンポーネントツリーに渡します。 render 関数内で、子コンポーネントで使用される headerProp および contentProp を設定しています。
App.jsx
main.js
結果は前の2つの例と同じになりますが、異なるのはデータのソースのみで、現在は元は state からのものです。 更新する場合は、状態を更新するだけで、すべての子コンポーネントが更新されます。 詳細については、イベントの章をご覧ください。