javascript - ReactJS:从基础组件访问上下文

Question

我正在尝试创建一个可以处理 UI 主题的基本组件。主题通过上下文传递给组件，但我创建的基本组件没有接收上下文。

class DetailView extends ThemedComponent {
  constructor(props) {
    super(props);
  }

  render() {
    return <div>Detail View</div>;
  }
}

export default DetailView;

class ThemedComponent extends Component {
  constructor(props, context) {
    super(props);
    // context here is undefined
  }
}

ThemedComponent.contextTypes = {
  theme: PropTypes.object,
};

export default ThemedComponent;

如果 DetailView 直接扩展 Component 并且一切正常，我可以从 DetailView 获取上下文。但是，当我尝试获取 ThemedComponent 中的上下文时，它始终是未定义的。

创建可以使用组件上下文执行操作的通用基础组件的正确方法是什么？

Answer 1

您必须将上下文传递给 DetailView 中的 super:

class DetailView extends ThemedComponent {
     constructor(props, context) {
          super(props, context);
     }
     .........
}