React-native-props

React Native-小道具

前回の章では、可変*状態*の使用方法を示しました。 この章では、状態と props を組み合わせる方法を示します。

プレゼンテーションコンポーネントは、 props を渡すことですべてのデータを取得する必要があります。 コンテナコンポーネントのみに state が必要です。

コンテナコンポーネント

ここで、コンテナコンポーネントとは何か、またどのように機能するかを理解します。

理論

次に、コンテナコンポーネントを更新します。 このコンポーネントは状態を処理し、小道具をプレゼンテーションコンポーネントに渡します。

コンテナコンポーネントは、状態の処理にのみ使用されます。 ビューに関連するすべての機能（スタイリングなど）は、プレゼンテーションコンポーネントで処理されます。

例

前の章の例を使用する場合、この要素はユーザーにテキストを提示するために使用されるため、レンダリング関数から Text 要素を削除する必要があります。 これは、プレゼンテーションコンポーネント内にある必要があります。

以下の例のコードを確認してみましょう。 PresentationalComponent をインポートして、レンダリング関数に渡します。

*PresentationalComponent* をインポートしてrender関数に渡した後、propsを渡す必要があります。 *myText = \ {this.state.myText}* および *deleteText = \ {this.deleteText}* を *<PresentationalComponent>* に追加して、小道具を渡します。 これで、プレゼンテーションコンポーネント内でこれにアクセスできるようになります。

*App.js*

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import PresentationalComponent from './PresentationalComponent'

export default class App extends React.Component {
   state = {
      myState: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit, used do eiusmod
      tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
      nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis
      aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
      nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
      officia deserunt mollit anim id est laborum.'
   }
   updateState = () => {
      this.setState({ myState: 'The state is updated' })
   }
   render() {
      return (
         <View>
            <PresentationalComponent myState = {this.state.myState} updateState = {this.updateState}/>
         </View>
      );
   }
}

プレゼンテーションコンポーネント

これから、プレゼンテーションコンポーネントとは何か、またその仕組みについても理解します。

理論

プレゼンテーションコンポーネントは、ユーザーにビューを表示するためにのみ使用する必要があります。 これらのコンポーネントには状態がありません。 すべてのデータと機能を小道具として受け取ります。

ベストプラクティスは、できるだけ多くのプレゼンテーションコンポーネントを使用することです。

例

前の章で述べたように、プレゼンテーションコンポーネントにはEC6関数構文を使用しています。

コンポーネントは小道具を受け取り、ビュー要素を返し、 \ {props.myText} を使用してテキストを提示し、ユーザーがテキストをクリックすると \ {props.deleteText} 関数を呼び出します。

*PresentationalComponent.js*

import React, { Component } from 'react'
import { Text, View } from 'react-native'

const PresentationalComponent = (props) => {
   return (
      <View>
         <Text onPress = {props.updateState}>
            {props.myState}
         </Text>
      </View>
   )
}
export default PresentationalComponent

これで、 State の章と同じ機能を使用できます。 唯一の違いは、コードをコンテナとプレゼンテーションコンポーネントにリファクタリングしたことです。

次のスクリーンショットのように、アプリを実行してテキストを表示できます。

React Native Props

テキストをクリックすると、画面から削除されます。

React Native Props更新