有什么实用的方法可以在组件中调用“React.createContext()”吗？

Question

假设我想为“手风琴”（一组可折叠面板）创建一个 UI 组件。父组件控制哪些面板打开的状态，而子面板应该能够读取上下文以确定它们是否打开。

const Accordion = ({ children }) => {
  const [openSections, setOpenSections] = useState({})

  const isOpen = sectionId => Boolean(openSections[sectionId])

  const onToggle = sectionId => () =>
    setOpenSections({ ...openSections, [sectionId]: !openSections[sectionId] })

  const context = useMemo(() => createContext(), [])
    // Can't tell children to use *this* context

  return (
    <context.Provider value={useMemo(() => ({ isOpen, onToggle }), [isOpen, onToggle])}>
      {children}
    </context.Provider>
  )
}

const AccordionSection = ({ sectionId, title, children }) => {
  const { isOpen, onToggle } = useContext(context)
    // No way to infer the right context

  return (
    <>
      <button onClick={onToggle(sectionId)}>{isOpen(sectionId) ? 'Close' : 'Open'}</button>
      {isOpen && children}
    </>
  )
}

我能想到的唯一方法是让Accordion 在children 更改时运行效果，然后深入遍历children 并找到AccordionSection 组件，同时不递归任何嵌套的Accordion 组件-- 然后cloneElement() 并注入context 作为每个AccordionSection 的道具。

这似乎不仅效率低下，而且我什至不完全确定它会起作用。这取决于效果运行时children 是否完全水合，我不确定是否会发生这种情况，并且它还需要在深度子级发生变化时调用Accordion 的渲染器，这我也不确定.

我目前的方法是为实现 Accordion 的开发人员创建一个自定义挂钩。该钩子返回一个函数，该函数返回必须手动传递给每个渲染的AccordionSection 的isOpen 和onToggle 函数。它可以工作并且可能比儿童解决方案更优雅，但需要更多开销，因为开发人员需要使用挂钩来维护原本封装在 Accordion 中的状态。

Answer 1

React.createContext 将返回一个包含 2 个组件的对象：

1. 提供者
2. 消费者

这两个组件可以共享数据，Consumer 可以从树上最近的Provider“抓取”上下文数据（或使用useContext 挂钩而不是渲染Consumer）。

您应该在父组件之外创建上下文对象，并使用它在您的children 组件内呈现Consumer（或使用useContext 挂钩）。

简单示例：

const myContext = createContext();

const Accordion = ({ children }) => {
  // ...
  return (
    <myContext.Provider value={...} >
      {children}
    </myContext.Provider>
  )
}


const AccordionSection = (...) => {
  const contextData = useContext(myContext);
  // use the data of your context as you wish
  // ...
}

请注意，我使用了useContext 钩子而不是渲染Consumer，如果你想使用钩子或Consumer，这取决于你。

您可以通过docs查看更多示例并获取更多详细信息