如何像道具一样传递 state 值

Question

i'd radio button component:

state = {
    radioValue: null,
  }



  render() {
    const { options,onPress } = this.props;
    const { radioValue } = this.state;

    return (
      <View style={{flexDirection: 'row'}}>
        {options.map(item => {
          return (
            <View key={item.key} style={styles.buttonContainer}>
              <TouchableOpacity
                style={styles.circle}
                onPress={() => {
                  this.setState({
                    radioValue: item.key,
                  });
                }}
              >
                {radioValue === item.key && <View style={styles.checkedCircle} />}
              </TouchableOpacity>
              <Text>{item.text}</Text>
            </View>
          );
        })}
      </View>
    );

then i use this component in an another like this:

 <RadioButton options={options} />  

How can i use the value of my state in the second component?? Thx !!

Answer 1

The best way would be to move the state from RadioButton to the outer component:

// RadioButton Component
  render() {
    const { options, onPress, value } = this.props;

    return (
      <View style={{flexDirection: 'row'}}>
        {options.map(item => {
          return (
            <View key={item.key} style={styles.buttonContainer}>
              <TouchableOpacity
                style={styles.circle}
                onPress={() => onPress(item.key)} // onPress comes from parent
              >
                {value === item.key && <View style={styles.checkedCircle} />}
              </TouchableOpacity>
              <Text>{item.text}</Text>
            </View>
          );
        })}
      </View>
    );

// Parent component
  state = {
    radioValue: null,
  }

  onPress = (value) => {
    this.setState({
      radioValue: value,
    });
  }

  render() {
    // ...
    <RadioButton
      options={options}
      onPresss={this.onPress}
      value={radioValue}
    />  
    // ...
  }

If you can't do that, another approach would be using render props . This would let you keep the state in the child, and pass it to the parent. Not recommended, though, as it is more confusing.