Question

我一直在创建一些自定义钩子，我想知道是否可以结合它们的上下文Providers。

我有这样的东西：

HookA

const ContextA = createContext({ value })

export const ProviderA = ({ children }) => {
  return (
    <ContextA.Provider value={{ myVal: 'A' }}>
      {children}
    </ContextA.Provider>
  )
}

export const useA = () => {
  const { myVal } = useContext(ContextA)
  return { myVal }
}

HookB

const ContextB = createContext({ value })

export const ProviderB = ({ children }) => {
  return (
    <ContextB.Provider value={{ myVal: 'B' }}>
      {children}
    </ContextB.Provider>
  )
}

export const useB = () => {
  const { myVal } = useContext(ContextB)
  return { myVal }
}

当前，为了在组件中使用这些挂钩，我必须像这样将应用程序包装在提供程序中：

ReactDOM.render(
  <ProviderA>
    <ProviderB>
      <App />
    </ProviderB>
  </ProviderA>,
  document.getElementById('root')
)

我是否可以将这些方式结合起来，例如创建一个CustomHooksProvider来充当两个钩子的提供者，但一直允许我继续useA和useB ？

类似这样的东西：

ReactDOM.render(
  <CustomHooksProvider>
    <App />
  </CustomHooksProvider>,
  document.getElementById('root')
)

我的CustomHooksProvider组件会是什么样？

Answer 1

创建一个接受.split(b",")的{{1}}组件，并渲染两个提供者：

CustomHooksProvider

更通用的方法是使用一个包装器组件列表的函数，并生成一个接受子组件并在包装器内部呈现子组件的新组件：

children

然后您可以通过与提供程序调用{{1}}函数来生成const CustomHooksProvider = ({ children }) => ( <ProviderA> <ProviderB> {children} </ProviderB> </ProviderA>, );：

const wrapWith = (...wrappers) => ({ children }) => 
  wrappers.reduceRight((rendered, Component) => (
    <Component>
      {rendered}
    </Component>
  ), children);

演示：

CustomHooksProvider

wrapWith

如何合并自定义钩子提供程序但保持其使用情况

1 个答案: