reactjs - React JS : Find out if component is inside a context provider

我正在使用React的Context API将一些上下文传递给较低级别​​的组件。

我希望能够在没有上下文提供程序的情况下运行组件(用于测试)。为此，我需要检查组件周围是否有上下文提供程序。

示例代码:

const Wrapper = () => {

  // in my real app, there are some levels
  // between the provider and the child component

  return <NameProvider value={name: 'User'}>
    <ChildComponent />
  </NameProvider>
}

const ChildComponent = () => {
  if (/* what can I put here ? */) {
    // inside Provider
    return <NameConsumer>
      {context => <span>{context.name}</span>}
    </NameConsumer>
  } else {
    // no provider available, e.g. in a test file
    return <span>Test Text</span>
  }
}

这个问题不是专门针对测试的。在其他情况下，组件需要在上下文提供者内部和外部工作。

最佳答案

没有提供官方方法来检查<Provider>子级是否有<Consumer>父级。

通常，如果<Consumer>是<Provider>值在undefined的内部还是外部，则没有区别，在两种情况下都将为其提供undefined值。

可以使用内部_currentValue属性检查当前上下文值，但这可能会导致undefined上下文值的误报:

const ChildComponent = () => {
  if (NameConsumer._currentValue !== undefined) {
    // inside Provider
    return <NameConsumer>
      {context => <span>{context.name}</span>}
    </NameConsumer>
  } else {
    // no provider available, e.g. in a test file
    return <span>Test Text</span>
  }
}

请注意，这在异步渲染中可能无法按预期方式工作，因此不建议依赖内部。更好的方法是检查测试环境。

一种更可测试的方法是一致地使用NameContext.Consumer而不是NameConsumer，因此可以在测试中模拟Consumer属性。否则，这可能需要模拟定义了NameConsumer的模块。

关于reactjs - React JS : Find out if component is inside a context provider，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/52167627/