reactjs - 值不通过 React Context API 传递
问题描述
我正在尝试使用 React Context API 重写我的应用程序,但遇到了下一个问题 - 我想通过 Provider 传递给 Consumer 的值没有传递。
初始状态:
let initialState = {
ve: 'randomValue'
};
export default initialState;
提供者:
import React, {Component} from 'react';
import MyContext from './myContext';
import initialState from './initialState';
class MyProvider extends Component{
constructor(props) {
super(props);
this.state = initialState;
}
render() {
return(
<MyContext.Provider value={{
state: this.state,
}}>
{this.props.children}
</MyContext.Provider>
)
}
};
export default MyProvider;
消费者:
import React, {Component} from 'react';
import {Text, View} from 'react-native';
import MyContext from './Context/myContext';
export default class App extends Component {
render() {
return (
<MyContext.Consumer>
{context => (
<View>
<Text>
{context}
</Text>
</View>
)}
</MyContext.Consumer>
);
}
}
我没有收到任何错误,但也没有 Context 值。
解决方案
您还需要在Provider
组件上方的某个位置使用该组件MyContext.Consumer
。
例子
const initialState = {
ve: "randomValue"
};
const MyContext = React.createContext();
class MyProvider extends React.Component {
constructor(props) {
super(props);
this.state = initialState;
}
render() {
return (
<MyContext.Provider
value={{
state: this.state
}}
>
{this.props.children}
</MyContext.Provider>
);
}
}
class App extends React.Component {
render() {
return (
<MyProvider>
<MyContext.Consumer>
{context => <div>{JSON.stringify(context)}</div>}
</MyContext.Consumer>
</MyProvider>
);
}
}
ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>
推荐阅读
- spring - “错误”:上传文件控制器上的“不支持的媒体类型”
- javascript - jQuery 手风琴不会删除单击上一个手风琴的类
- php - Kubernetes pod design - 在水平扩展期间在多个 pod/容器之间共享 PHP 源代码
- java - JAVA + SQLite - 使用 strftime() 从每一行获取格式化日期
- python - 三角波的数学方程
- pandas - 拼音命名实体识别
- c# - 使用 Parallel.For 搜索最小值/最大值
- apache-pig - Apache Pig 拉丁语中的月份名称
- reactjs - 我想更改脉轮 ui 按钮的默认样式
- python - Python:如果需要,将浮点格式设置为最小浮点精度