Использование провайдера напрямую из контекста против возврата его из функции

Question

Я замечаю что-то новое, чего раньше не видел.Возможно, это не относится к данному компоненту реакции.

Я попытался создать контекст реакции

const MyContext = createContext({...});

Затем я написал функцию для возврата поставщика

const MyProvider = () => {
  return <MyContext.Provider value={...} />;
};

<MyProvider /> - это тип функции React, а <MyContext.Provider /> - это тип объекта React.

Когда <MyProvider /> используется для переноса компонентов, приложение React аварийно завершает работу.Однако непосредственное использование <MyContext.Provider /> работает, как я и ожидал.

Поскольку эти два элемента не совпадают, возможно ли создать компонент поставщика извне и импортировать его в другое место для его использования?

Answer 1

export const MyProvider = (props) => { return ( <MyContext.Provider value={...} /> { props.children } </MyProvider> ); };

Мы можем импортировать его как:

import { MyProvider } from '../path'

использовать

<MyProvider><YouComponent/></MyProvider>