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;

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

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

Answer 1

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

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

ReactJS：从基础组件

1 个答案: