React/React Nativeにおけるコンポーネント間での値・関数・中身の受け渡し

基本中の基本。

値を渡す

親コンポーネント

export default class Parent extends Component {
  render() {
    return (
      <View>
        <Child text={'こんにちは'}>
      </View>
    );
  }
}

子コンポーネント

export default class Child extends Component {
  render() {
    text = this.props.text;

    return (
      <View>
        <Text>{text}</Text>
      </View>
    );
  }
}

関数を渡す

bind(this)をしないと、updateParentState内でthisが使えないので注意。

親コンポーネント

export default class Parent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      text: 'ボタンを押して',
    };
  }

  updateParentState(_text) {
    this.setState({text: _text})
  }

  render() {
    return (
      <View>
        <Text>{this.state.text}</Text>
        <Child updateText={this.updateParentState.bind(this)} />
      </View>
    );
  }
}

子コンポーネント

export default class Child extends Component {
  render() {
    return (
      <View>
        <Button onPress={() => this.props.updateText('ボタンが押されました')}>
      </View>
    );
  }
}

コンポーネントがラップした中身を取得する

親コンポーネント

export default class CustomComponent extends Component {
  render() {
    return (
      <CustomView>
        <Text>中身のテキスト</Text>
      </CustomView>
    );
  }
}

子コンポーネント

export default class CustomView extends Component {
  render() {
    return (
      <View style={{flex: 1, backgroundColor: '#eee'}}>
        {this.props.children}
      </View>
    );
  }
}