除了 value 道具之外的任何道具都可以在 Context.Provider 中工作吗

Posted 2023-04-14

【中文标题】除了 value 道具之外的任何道具都可以在 Context.Provider 中工作吗

【英文标题】：Will any prop apart from the value prop work inside Context.Provider

【发布时间】：2019-10-30 13:15:36

【问题描述】：

在下面这个sn-p中（取自docs）：

import React from 'react'
import  render, cleanup  from '@testing-library/react'
import 'jest-dom/extend-expect'
import  NameContext, NameProvider, NameConsumer  from '../react-context'

afterEach(cleanup)

/**
 * Test default values by rendering a context consumer without a
 * matching provider
 */
test('NameConsumer shows default value', () => 
  const  getByText  = render(<NameConsumer />)
  expect(getByText(/^My Name Is:/)).toHaveTextContent('My Name Is: Unknown')
)

/**
 * To test a component tree that uses a context consumer but not the provider,
 * wrap the tree with a matching provider
 */
test('NameConsumer shows value from provider', () => 
  const tree = (
    <NameContext.Provider value="C3P0">
      <NameConsumer />
    </NameContext.Provider>
  )
  const  getByText  = render(tree)
  expect(getByText(/^My Name Is:/)).toHaveTextContent('My Name Is: C3P0')
)

/**
 * To test a component that provides a context value, render a matching
 * consumer as the child
 */
test('NameProvider composes full name from first, last', () => 
  const tree = (
    <NameProvider first="Boba" last="Fett">
      <NameContext.Consumer>
        value => <span>Received: value</span>
      </NameContext.Consumer>
    </NameProvider>
  )
  const  getByText  = render(tree)
  expect(getByText(/^Received:/).textContent).toBe('Received: Boba Fett')
)

/**
 * A tree containing both a providers and consumer can be rendered normally
 */
test('NameProvider/Consumer shows name of character', () => 
  const tree = (
    <NameProvider first="Leia" last="Organa">
      <NameConsumer />
    </NameProvider>
  )
  const  getByText  = render(tree)
  expect(getByText(/^My Name Is:/).textContent).toBe('My Name Is: Leia Organa')
)

我没有得到我们将 first 和 last 作为道具传递给 NameProvider 的部分。

假设这三者的定义如下：

NameContext = createContext()
NameProvider = NameContext.Provider
NameConsumer = NameContext.Consumer

我们是否允许在Provider 内传递除value 属性之外的属性。

如果是，您能否分享一个如何做到这一点的示例。我似乎也无法在反应文档中找到它。

提前致谢！！ :D

【参考方案1】：

从这些文档中不是很清楚，但NameContext.Provider 和NameProvider 之间存在细微差别。 NameContext.Provider 是从React.createContext 返回的原始Provider，并且只将value 作为prop。

在testing-library 文档中，他们没有解释，但是他们创建了一个单独的NameProvider，它包装了NameContext.Provider，并提供了一个first/last prop 接口，如下所示：

const NameProvider = ( first, last, children ) => (
  <NameContext.Provider value= first, last >
    children
  </NameContext.Provider>
)

这允许您创建一个具有有限接口的 Provider，如果（例如）您正在编写一个其他开发人员将使用的库，并且您不想让他们完全访问 Provider 的value道具。