React Native Props

React Native (Props)

前回に続き、ReactNativeの説明を行います。 今回は、Propsに焦点を当てます。

Props

Componentが作成された際に異なったパラメータが作成されます。 その際に親から渡されたパラメータを Props と呼びます。

Props

以下では Helloというコンポーネントを定義しています。 メインで実行するclassはHelloChildremで、その際に Helloコンポーネントを呼び出した際に、props.nameを渡しています。

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

export default class HelloChildren extends React.Component {
  render(){
    return (
      <View style={{alignItems: 'center', marginTop: 200}}>
        <Hello name='props1' />
        <Hello name='props2' />
        <Hello name='props3' />
      </View>
    );
  }
}

実行画面

参考

React.js コンポーネント入門（props/state）

Props · React Native