Question

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

在我的父组件（NavigatorRiddles）中，我使用的是navigator，我的子组件是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>
    )
  }
}

如果您有任何问题，请与我们联系。

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

1 个答案: