从子组件更新父 React 组件

Question

我正在使用 React 上下文 api 到处显示我的数据并从任何地方更新我希望我的数据可以在多个屏幕上显示并且我可以从多个屏幕上更新 class 我需要在全球范围内使用它。

当我尝试从 class 个人资料屏幕更新它时没有任何反应，但它可以从 class 主屏幕更新。

如何在不使用这种方式的情况下在消费者中显示我的数据，并在全球范围内显示此数据

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

Class 作为上下文提供程序的主屏幕 class

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 正在更改上下文提供程序数据

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>
    );
  }
}

Answer 1

您需要将回调从 HomeScreen 传递到 ProfileScreens 此回调将在 ProfileScreens 内调用并触发 HomeScreen 状态更改：

在HomeScreen中：

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

然后在 ProfileScreens:

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

从子组件更新父 React 组件

Update parent React component from child component

reactjs

react-native

react-native-android

react-native-ios

react-context