我试图在我的React App中设置一个上下文,但不知怎的,我无法从孩子那里获取context
。
这是父类:
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
都返回一个空对象,我做错了什么?
答案 0 :(得分:13)
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。
答案 1 :(得分:-1)
上下文是一项高级实验性功能。 API可能会在将来的版本中发生变化。 source
如果您需要将信息传递给孩子,请将其作为prop
传递给孩子。如下所示
类App
<MenuBar myProp="hello"/>
类MenuBar
constructor(props, context){
super(props,context)
console.log(this.props.myProp) //prints 'hello'
}