ローディング中

react nativeでのコンポーネント間の値の受け渡しについて

react nativeでのコンポーネント間の値の受け渡しについて

みなさんこんにちは!個別指導塾コミット塾長、AWESOMEの開発担当の船津です。

今回はコンポーネント間のデータ受け渡しについて考えてみます。

コンポーネント間でのデータ受け渡し方法

コンポーネント間でのデータ受け渡し方法はいくつかあります。
– propsでの受け渡し
– コールバックを利用する
– reduxを使ってstateをglobalに参照できるようにする

redux以外の方法をまとめてみましょう。

親から子コンポーネントへの受け渡し

値の受け渡しについてちょっとまとめてみましょう。
例えばこんな感じですね

親コンポーネント

<View>
 <ChildComponent someWord={'Hello, World'} />
</View>

子コンポーネント


<View>
 <Text>{this.props.someWord}</Text>
</View>

表示

“Hello,World”

コールバックによる受け渡し(子のアクションから親の関数を実行)

親コンポーネント


someFunction(value){
  set.setState({
    number: value + 1
   })
}

<View>
 <ChildComponent onPress={someFunction} value={this.state.number} />
</View>

子コンポーネント


<View>
 <Text onPress={this.props.someFunction}>Press!!</Text>
  <Text>{this.props.value}</Text>
</View>

まとめてみました

次回はreact-native-router-fluxでシーン間のデータ受け渡しについて学んでみましょう

ホームページ制作のご相談・ご依頼は

079-451-5881

68ED4C65-BA1E-46D0-A7AC-B9869923C696 Created with sketchtool. A07C553F-CF16-4B7D-94FE-D36AE0A6297D Created with sketchtool. 37B7D8F4-7A18-4725-9EC6-595ABDF69D64 Created with sketchtool. 95DFB680-1EDF-4199-BC4A-BB6752EBA23C Created with sketchtool. 02DDF754-E1DB-4EF2-B6BB-C884722938C4 Created with sketchtool. NEW! 1A95E369-6469-4C46-B38F-F83410B928B0 Created with sketchtool. Group 5Group 2Group 4Group 3 E4FC8CF2-721D-4699-8162-18E886C432C1 Created with sketchtool.