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

Question

假设我想为“ Accordion ”(一组可折叠面板)创建一个 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()并注入(inject) context作为每个 AccordionSection 的 Prop .

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

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

Answer 1

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

提供者

消费者

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

您应该在父组件之外创建上下文对象并使用它来呈现 Consumer在您的 children 内组件(或使用 useContext Hook )。

简单的例子:

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钩子(Hook)而不是渲染 Consumer , 由你决定是否使用钩子(Hook)或 Consumer .

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