ReactNative-小道具

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

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

コンテナコンポーネント

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

理論

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

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

例

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

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

インポートした後 PresentationalComponentそれをレンダリング関数に渡すには、小道具を渡す必要があります。追加して小道具を渡します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章。唯一の違いは、コードをコンテナーとプレゼンテーションコンポーネントにリファクタリングしたことです。

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

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