Будет ли любая опора, кроме значения проп, работать внутри Context.Provider

Question

В этом фрагменте ниже (взятом из документов ):

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

Разрешено ли пропускать реквизиты, кроме value, внутриProvider.

Если да, не могли бы вы поделиться примером того, как это можно сделать.Кажется, я не могу найти его и в реактивных документах.

Заранее спасибо !!: D

Answer 1

Из этих документов не очень понятно, но между NameContext.Provider и NameProvider есть небольшая разница. NameContext.Provider является необработанным провайдером, возвращенным из React.createContext, и принимает только value в качестве реквизита.

В документах testing-library они этого не объясняют, но они создали отдельный NameProvider, который включает NameContext.Provider и предоставляет first/last интерфейс поддержки, что-то вроде этого:

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

Это позволяет вам создавать провайдера с ограниченным интерфейсом, что полезно, если (например) вы пишете библиотеку, которую будут использовать другие разработчики, и вы не хотите предоставлять им полный доступ к провайдеру. value проп.