从子组件获取父元素状态

Question

我有一个状态变化的组件，我想从父组件中获取“性别”的值。我该怎么做？

class CardSegment extends Component {

  constructor(props) {
    super(props);
    this.state = { gender: 'male', val: true };
  }

  render() {
    return (
      <StyleProvider style={getTheme(commonColor)}>
        <Segment style={styles.SegmentStyle}>
          <Button
            active={this.state.val}
            onPress={() => this.setState({ gender: 'male', val: true })}
            style={styles.SegmentBtnStyle}
          >
            <Text style={styles.textStyle}>Male</Text>
          </Button>
          <Button
            active={!this.state.val}
            onPress={() => this.setState({ gender: 'female', val: false })}
            style={styles.SegmentBtnStyle}
          >
            <Text style={styles.textStyle}>Female</Text>
          </Button>
        </Segment>
      </StyleProvider>
    );
  }

}

Answer 1

假设您有执行某些逻辑的父组件并将gender 作为道具传递..（无状态组件）

const ParentComponent= props => {
  const gender= 'your parent component should handle the "gender" logic here'

  return <CardSegment gender={gender} />;
};

在 CardSegment（子组件！！？！）中，只使用 componentWillReceiveProps 生命周期方法来同步更新状态。

class CardSegment extends Component {

constructor(props) {
  super(props);
  this.state = { gender: '', val: true }; 
}
componentWillReceiveProps(props){
  this.setState({gender: this.props.gender });
}
  render() {
    return (
    <StyleProvider style={getTheme(commonColor)}>
      <Segment style={styles.SegmentStyle}>
        <Button
          active={this.state.val}
          onPress={() => this.setState({ gender: 'male', val: true })}
          style={styles.SegmentBtnStyle}
        >
          <Text style={styles.textStyle}>Male</Text>
        </Button>
        <Button
          active={!this.state.val}
          onPress={() => this.setState({ gender: 'female', val: false })}
          style={styles.SegmentBtnStyle}
        >
          <Text style={styles.textStyle}>Female</Text>
        </Button>
      </Segment>
    </StyleProvider>
    );
  }
}