ReactJS:从基本组件访问上下文

ReactJS: Access context from base component

本文关键字：组件 访问 上下文 ReactJS      更新时间：2023-09-26

我正在尝试创建一个可以处理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中获取上下文时，它总是未定义的。

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

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

class DetailView extends ThemedComponent {
     constructor(props, context) {
          super(props, context);
     }
     .........
}
相关文章：