reactjs – v16.6.0或更高版本在提供上下文的组件中使用子级时,C

我通过在消耗上下文的组件内声明公共静态contextType来使用react的新上下文API(v16.6.0或更高版本).
只要声明Provider的组件不直接使用在其render()方法中使用上下文的组件,这样就可以正常工作.

例：

ParentWithContext

这是创建和提供上下文的组件.

export const SomeContext = React.createContext({
  someValue: false
});

export default class ParentWithContext extends Component {
  public render(){
    const contextValue = {someValue: true};
    return (
      <SomeContext.Provider value={contextValue}>
        <ChildOne />
        {this.props.children}
      </SomeContext.Provider>
    );
  }
}

请注意,此组件在其render()方法中使用ChildOne组件(位于右下方).

ChildOne和ChildTwo

这两个组件只是消耗上面的上下文并显示它.

export default class ChildOne extends Component {
  public static contextType = SomeContext;
  public render(){
    return (
      <div>
        {`Context of ChildOne: ${this.context.someValue}`}
      </div>
    );
  }
}

export default class ChildTwo extends Component {
  public static contextType = SomeContext;
  public render(){
    return (
      <div>
        {`Context of ChildTwo: ${this.context.someValue}`}
      </div>
    );
  }
}

index.tsx

class App extends Component {

  render() {
    return (
      <ParentWithContext>
        <ChildTwo />
        <ChildOne />
      </ParentWithContext>
    );
  }
}

运行此示例将生成以下行：

Context of ChildOne: undefined
Context of ChildTwo: true
Context of ChildOne: undefined

所以ChildTwo似乎从this.context收到了正确的信息,而ChildOne什么也没收到.

现在到了奇怪的部分(对我来说)：当你删除< ChildOne />从ParentWithContext它突然适用于ChildOne和ChildTwo

新的ParentWithContext

export default class ParentWithContext extends Component {
  public render(){
    const contextValue = {someValue: true};
    return (
      <SomeContext.Provider value={contextValue}>
        {this.props.children}
      </SomeContext.Provider>
    );
  }
}

新的HTML输出

Context of ChildTwo: true
Context of ChildOne: true

Running Code

题

当Provider组件直接使用消耗其render()函数中的上下文的子组件时,为什么上下文API(> = v16.6)不起作用(使用静态contextType)？这是一个错误还是一个已知的限制？我错过了什么？

附加信息

使用< SomeContext.Consumer>将按预期工作.

export default class ChildOne extends Component {
  public render(){
    return (
      <SomeContext.Consumer>
        {context =>
          <div>
          {`Context of ChildOne: ${context.someValue}`}
          </div>
        }
      </SomeContext.Consumer>
    );
  }
}

当然,这不是解决这个问题的方法,但可能是一个有用的信息.

import ChildOne from "./ChildOne";

export const SomeContext = React.createContext({
  someValue: false
});

export const SomeContext = React.createContext({
  someValue: false
});

import ChildOne from "./ChildOne";