我正在尝试在我的React应用程序中设置一个上下文,但不知怎的,我无法访问来自儿童的上下文.
这是父类：
这是父类：
import React from 'react'
import MenuBar from './MenuBar.js'
export default class App extends React.Component {
static childContextTypes = {
prop: React.PropTypes.bool
};
getChildContext(){
return {
prop: true
}
}
render() {
return (
<div>
<MenuBar />
</div>
)
}
}
这是我的孩子班：
import React,{ Component } from 'react';
export default class MenuBar extends Component {
constructor(props,context){
super(props,context)
console.log(this.context)
console.log(context)
}
render() {
console.log(this.context)
return (
<div>MenuBar</div>
);
}
}
所有的console.log都返回一个空对象,我做错了什么？
解决方法
Context主要由库作者使用,例如,React Router和Redux–两个广泛使用的React库 – 目前依赖于上下文.以下是Dan Abramov(Redux的作者)撰写的精彩摘要：
https://stackoverflow.com/a/36431583/4186037
代码中缺少的部分是以下需要出现在子组件上的静态变量：
static contextTypes = {
prop: React.PropTypes.bool
};
这是一个演示：http://codepen.io/PiotrBerebecki/pen/LRLgJP及以下是完整代码.
class App extends React.Component {
static childContextTypes = {
prop: React.PropTypes.bool
};
getChildContext() {
return {prop: true};
}
render() {
return <MenuBar/ >;
}
}
class MenuBar extends React.Component {
constructor(props,context) {
super(props,context);
console.log('in constructor',context.prop) // logs: true
}
static contextTypes = {
prop: React.PropTypes.bool
};
render() {
console.log('in render',this.context.prop) // logs: true
return (
<div>MenuBar</div>
);
}
}
ReactDOM.render(
<App />,document.getElementById('app')
);
对于React v15.5及更高版本,使用PropTypes而不是React.PropTypes,并导入PropTypes,如下所示：
import PropTypes from 'prop-types';
有关更多信息,请参阅：https://reactjs.org/docs/typechecking-with-proptypes.html.
