React-native-props
React Native-小道具
前回の章では、可変*状態*の使用方法を示しました。 この章では、状態と props を組み合わせる方法を示します。
プレゼンテーションコンポーネントは、 props を渡すことですべてのデータを取得する必要があります。 コンテナコンポーネントのみに state が必要です。
コンテナコンポーネント
ここで、コンテナコンポーネントとは何か、またどのように機能するかを理解します。
理論
次に、コンテナコンポーネントを更新します。 このコンポーネントは状態を処理し、小道具をプレゼンテーションコンポーネントに渡します。
コンテナコンポーネントは、状態の処理にのみ使用されます。 ビューに関連するすべての機能(スタイリングなど)は、プレゼンテーションコンポーネントで処理されます。
例
前の章の例を使用する場合、この要素はユーザーにテキストを提示するために使用されるため、レンダリング関数から Text 要素を削除する必要があります。 これは、プレゼンテーションコンポーネント内にある必要があります。
以下の例のコードを確認してみましょう。 PresentationalComponent をインポートして、レンダリング関数に渡します。
プレゼンテーションコンポーネント
これから、プレゼンテーションコンポーネントとは何か、またその仕組みについても理解します。
理論
プレゼンテーションコンポーネントは、ユーザーにビューを表示するためにのみ使用する必要があります。 これらのコンポーネントには状態がありません。 すべてのデータと機能を小道具として受け取ります。
ベストプラクティスは、できるだけ多くのプレゼンテーションコンポーネントを使用することです。
例
前の章で述べたように、プレゼンテーションコンポーネントにはEC6関数構文を使用しています。
コンポーネントは小道具を受け取り、ビュー要素を返し、 \ {props.myText} を使用してテキストを提示し、ユーザーがテキストをクリックすると \ {props.deleteText} 関数を呼び出します。
これで、 State の章と同じ機能を使用できます。 唯一の違いは、コードをコンテナとプレゼンテーションコンポーネントにリファクタリングしたことです。
次のスクリーンショットのように、アプリを実行してテキストを表示できます。
テキストをクリックすると、画面から削除されます。