如何将所有状态值传递给子组件的数量并更新父组件

Question

我是原生反应新手，在我的第一个应用程序中遇到了一些挑战。在我的应用程序中，我有父组件和一个以上的子组件，在父组件中，我的状态具有我需要传递给所有子组件的值，在每个子组件中，如果状态为更新，我需要父组件也得到更新，但我很难将所有状态值传递给子组件。

在我的父组件（NavigatorRiddles）中，我使用的是导航器，我的子组件是 HomeScreen 和 Riddles：

export default class NavigatorRiddles extends React.Component {
  constructor(props) {
    super(props);
    this.state = { userAnswer: '', count: 0, diamonds: 0, urldatabase: {}, wordsnumber: 0, riddleletter: '' };
  }

  render() {
    return (
      <View>
        <HomeScreen getState={...this.state}/>
      </View>
    )
  }
}

class RiddlesScreen extends React.Component {
  static navigationOptions = {
    header: null
  }
  render() {
    return (
      <View>
        <Riddles navigation={this.props.navigation} getState={...this.state}/>
      </View>
    )
  }
}

const Navigate = StackNavigator(
  {
    Home: { screen: HomeScreen },
    Riddles: { screen: RiddlesScreen },
  },

)

在子组件中，我不知道如何使组件实际获得该状态

每一个帮助真的很感激！ 谢谢。

Answer 1

我不确定我是否理解正确，但你可以像这样传递你的状态：

<HomeScreen navigatorState={this.state} />

然后在孩子中访问这个道具：

class RiddlesScreen extends React.Component {
  static navigationOptions = {
    header: null
  }
  render() {
    console.log(this.props.navigatorState) // { userAnswer: '', count: 0, diamonds: 0, urldatabase: {}, wordsnumber: 0, riddleletter: '' }
    return (
      <View>
        <Riddles navigation={this.props.navigation} getState={...this.state}/>
      </View>
    )
  }
}

如果您有任何问题，请告诉我。