2 回答

TA貢獻1808條經驗 獲得超4個贊
問題在于,someNestedComponent它不引用使用該類的類this.context:
someNestedComponent.contextType = Config;
它是指包裝原始類的功能組件,因為它是用@connect裝飾器裝飾的,它是用于以下方面的語法糖:
const someNestedComponent = connect(...)(class someNestedComponent extends Component {
...
});
someNestedComponent.contextType = Config;
相反,它應該是:
@connect(...)
class someNestedComponent extends Component {
static contextType = Config;
componentDidMount() {
console.log(this.context);
}
...
}
上下文API沒有回調地獄的問題。這可以通過與React Redux中使用的相同的高階組件模式方便地解決,并且還可以受益于裝飾器語法:
const withConfig = Comp => props => (
<Config.Consumer>{config => <Comp config={config} {...props} />}</Config.Consumer>
);
@connect(...)
@withConfig
class someNestedComponent extends Component {
componentDidMount() {
console.log(this.props.config);
}
...
}
添加回答
舉報