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でシーン間のデータ受け渡しについて学んでみましょう

PR

Instagram Feed

Load More
Something is wrong. Response takes too long or there is JS error. Press Ctrl+Shift+J or Cmd+Shift+J on a Mac.

Instagram

専務取締役

funatsukeisuke

WEBと教育を組み合わせて何かおもしろいことをやってやろうと画策しています。AWESOMEでは開発を担当、個別指導塾コミットでは塾長と2足の草鞋を履きながら日々勉強しています。

他の投稿を見る →