5

public static 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>
    );
  }
}

请注意，该组件在其方法中使用了ChildOne组件（如下所示） 。render()

子一和子二

这两个组件只是简单地使用上述上下文并显示它。

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>
    );
  }
}

索引.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

运行代码

问题

static contextType当Provider组件直接使用在其函数中使用上下文的子组件时，为什么上下文 API (>=v16.6) 不起作用（使用） render()？这是错误还是已知限制？我错过了什么？

附加信息

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

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

当然，这不是解决此问题的方法，但可能是有用的信息。

4

1 回答 1

2

我在 reacts github 上创建了一个问题，发现它不是反应错误，而是 Javascript/Typescript 问题。

概括

错误的导入顺序导致了“错误”。因为在上下文声明之前ChildOne被导入 (in )，实际上是在它被导入时。ParentWithContextSomeContextundefinedChildOne

import ChildOne from "./ChildOne";

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

因此，一种解决方案是交换这两个声明

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

import ChildOne from "./ChildOne";

或者简单地（和恕我直言更清洁）将上下文提取到它自己的文件中。这样您就可以排除将来出现的任何类似问题。

于 2019-01-06T10:23:40.753 回答