javascript – React`context`总是空对象

我正在尝试在我的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.

javascript – React`context`总是空对象

解决方法

猜你在找的JavaScript相关文章