Застрял при поднятии состояния в React Native

Question

Я создаю пример приложения реагирования для целей обучения, в котором используется следующая иерархия отдельных компонентов:

<RadioButton>
   //Radio buttons are rendered here and selection of radio buttons are maintained in state of this component
</RadioButton>

<SelectCard>
    <RadioButton dataToPopulate = ['choice A', 'choice B'] />
</SelectCard>

<ParentSelectCard>
    <SelectCard /> //Rendering SelectCard with passing some data as prop from here
</ParentSelectCard>

<Button />  //Custom button component

<HomeScreen>
    <ParentSelectCard />
    <Button />
</HomeScreen>

Теперь, когда я нажимаю кнопку, я хочу перейти на другой экран с помощьюпередача выбранных опций в переключателях.

Я прочитал эту статью о поднятии состояния. Но проблема в том, что здесь нет общего родительского предка, к которому я могу поднять состояниек.

Если я перечислю состояние до <HomeScreen> компонента, как я могу управлять выборами, сделанными в <RadioButton> компоненте?

Вот полный код компонента <RadioButton>:

class RadioButton extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      radioSelected: 0
    }
  }

  handleRadioClick(id) {
    this.setState({
      radioSelected: id
    });
  }

  render(){
    return this.props.dataToPopulate.map((element) => {
      return (
        <View key = {element.id} style={styles.radioButton}>
          <TouchableOpacity style={styles.radioButtonTint} onPress = {this.handleRadioClick.bind(this, element.id)}>
            { element.id === this.state.radioSelected ? (<View style={styles.radioButtonSelected}/>) : (null) }
          </TouchableOpacity>
          <Text style={styles.radioButtonText}> {element.value} </Text>
        </View>
      );
    });
  }
}

Здесь вы видите, что окончательный выбор будет сохранен в состоянии этого компонента (в radioSelected),

Что мне здесь не хватает?Мой дизайн <RadioButton> не так?

Answer 1

Что мне здесь не хватает?Мой дизайн неправильный?

Хорошо, если вы "поднимите состояние", сама радиокнопка вообще не должна иметь никакого состояния.Вместо этого передайте обработчик в RadioButton:

 <RadioButton onChange={value => this.doSomethingWith(value)} />

Затем вы можете вызвать его внутри переключателя, когда что-то изменилось, и обработать результаты в <App/>.

Если вычтобы передать этот обработчик через несколько уровней, может быть лучше использовать context .