reactjs - 从子组件更新父 React 组件
问题描述
我正在使用 react context 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>
);
}
}
解决方案
你需要向下传递一个回调HomeScreen
,ProfileScreens
这个回调将在内部调用ProfileScreens
并触发HomeScreen
状态更改:
在HomeScreen
:
...
<ProfileScreens changeHomeScreen={() => this.setState({...})}/>
...
然后在ProfileScreens
:
...
<Button title="decrementss" onPress={()=>{ this.props.changeHomeScreen() }}/>
...
推荐阅读
- python - Python import class from module 说找不到模块错误
- python - AttributeError:模块“matplotlib.pyplot”没有属性“pyplot”
- javascript - 如何在Javascript中按值对数组中的嵌套字典进行排序
- maven - 将 Maven 项目迁移到 Gradle 的问题
- python - Python,如何对多元时间序列进行聚类?
- swift - 标题视图未扩展到 safeArea SwiftUI
- angular - 从 FireStore GET 订阅刷新数据 - Angular - Firebase/FireStore
- html - 从 URL 源创建 html 表
- python - 一个对象如何影响同一类的另一个对象?
- unity3d - 如何将力传递给统一的子刚体?