如何將所有狀態值傳遞給子組件數並更新父組件

Question

我是新來的本地人，我在第一個應用程序中遇到了一些挑戰。 在我的應用程序中，我有一個父組件，然后有一個以上的子組件，在父組件中，我具有需要傳遞給所有子組件的值的狀態，在每個子組件中，如果狀態為update，我也需要父級也要更新，但是我很難將所有狀態值傳遞給子組件。

在我的父組件（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>
    )
  }
}

如果您有任何疑問，請告訴我。