ReactNative入門③ ~Propsに触れる~

Props

Componentを場面に適した状態で使用するには、Propsを使用します。
場面に適した状態とは、ボタンのコンポーネントを作成時には「作成」と表示されたボタン、更新時には「更新」と表示されたボタンを描画することです。
この、コンポーネントをカスタマイズするパラメータをpropsと呼びます。

コードで確認する

先にソースコードを見てみましょう。

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

class Greeting extends Component {
  render() {
    return (
      <Text>Hello {this.props.name}!</Text>
    );
  }
}

export default class LotsOfGreetings extends Component {
  render() {
  return (
      <View style={{alignItems: 'center'}}>
        <Greeting name='Rexxar' />
        <Greeting name='Jaina' />
        <Greeting name='Valeera' />
      </View>
    );
  }
}

AppRegistry.registerComponent('AwesomeProject', () => LotsOfGreetings);

解説

今回のコードでは、Greetingというコンポーネントを作成し、LotsOfGreetingsというコンポーネントの中で呼び出しています。

注目は、Greetingコンポーネントを呼び出している16~18行目です。
name=名前となっています。この部分で、Greetingコンポーネントにpropsを定義しています。
propsの定義は、props名=propsの値という形になります。
そして、Greetingコンポーネント側では、this.nameと記述することで、propsにアクセスしています。
これがpropsの定義方法と値の取得方法になります。
シミュレータを確認すると、以下のように同じコンポーネントを使っていても、表示される名前が異なります。（ステータスバーに重なっているので、見づらいですが、、、）
このようにpropsを使うことで、同じコンポーネントを使っても、表示などを変更することが可能になります。