javascript - 直接从上下文使用提供程序与从函数返回它

Question

我注意到一些我以前从未见过的新东西。这可能不是特定于该 react 组件的。

我尝试创建一个 react 上下文

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>