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

Question

我正在使用 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>
  }
}

这个问题并不是专门关于测试的。在其他情况下，组件可能需要在上下文提供程序内部和外部工作。

Answer 1

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

一般来说，<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已定义。