Обновить родительский компонент React из дочернего компонента - PullRequest
Новая
       27

Обновить родительский компонент React из дочернего компонента

0 голосов
/ 06 октября 2018

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

Когда я пытаюсь обновить его с экранов профиля класса, ничего не происходит, но оно может обновляться с домашнего экрана класса.

Как я могу показать свои данные потребителю, не используя подобное, и показать эти данные глобально 

const Context = React.createContext("default value")    
global.cart = 1;

Домашний экран класса, который является классом провайдера контекста 

class HomeScreen extends Component<Props> {
    constructor(props){
      super(props);
      this.state={
          contextData:5}}
  render() {
    return (
      <View>
      <Context.Provider value={this.state.contextData}>
        <Button title="Increment" onPress={++global.cart;
        this.setState({contextData:global.cart})}/>
      </Context.Provider>
      <ProfileScreens/>
      </View>
    )
  }
}

текст, который мне нужно использовать и отображать на многих экранах 

class ProfileScreen extends Component<Props> {
  render() {
  return (
      <View style={{}}>
        <Context.Consumer>
          {data=>  <Text style={{fontSize:50}}>{data.toString()}</Text>}
        </Context.Consumer>
      </View>
    );
  }
}

другой класс, который изменяетданные провайдера контекста 

class ProfileScreens extends Component<Props> {
  constructor(props){
    super(props);
    this.state={contextData:5}}
  render() {
    return (
      <View >
        <Context.Provider value={this.state.contextData}>
          <ProfileScreen/>
          <Button title="decrementss" onPress={()=>{  ++global.cart;
            this.setState({contextData:global.cart})}}/>
        </Context.Provider>
      </View>
    );
  }
}

1 Ответ

0 голосов
/ 06 октября 2018

вам нужно передать обратный вызов с HomeScreen до ProfileScreens, этот обратный вызов будет вызван в течение ProfileScreens и вызвать HomeScreen изменение состояния:

в HomeScreen: 

...
<ProfileScreens changeHomeScreen={() => this.setState({...})}/>
...

затем в ProfileScreens: 

...
<Button title="decrementss" onPress={()=>{ this.props.changeHomeScreen() }}/>
...
...