Question

我有一个小例子，我尝试使用contextType，但我全都错了。这是我正在使用的内容的简单再现。

import React from 'react';

const AppContext = React.createContext({ id: 222 });

class ContextProvider extends React.Component {
  props;

  render() {
    return (
      <AppContext.Provider value={{id: 1234}}>
        {this.props.children}
      </AppContext.Provider>
    );
 }
}


class ContextConsumer extends React.Component {
  props;

  context;

  render() {
    const { id } = this.context;// id is undefined
    console.log(this.context); // logs an empty object {}

    return (
      <div>Hello {id}</div>
    );
  }
}

ContextConsumer.contextType = AppContext;


const ContextApp = ({}) => {
  return (
    <ContextProvider>
      <ContextConsumer />
    </ContextProvider>
  );
};

export default ContextApp;

我可以得到为什么contextType不起作用的任何指示，但是如果我使用AppContext.Consumer，一切都可以。

反应版本：16.6.3

Answer 1

啊，我刚刚意识到我也需要在主机应用程序中将react和react-dom升级到16.6。太快了。

React contextType没有获取上下文值

1 个答案: