环境提供者

我们在内部使用Zag.js，它依赖于 DOM 查询方法，例如document.querySelectorAll 和 document.getElementById。在 iframe、Shadow DOM 或 Electron 等自定义环境中，这些方法可能无法按预期工作。

为了解决这个问题，Ark UI 提供了 EnvironmentProvider，允许您设置适当的根节点或文档，确保正确的 DOM 查询。

用法

import { EnvironmentProvider } from "@chakra-ui/react"

<EnvironmentProvider>{/* Your App */}</EnvironmentProvider>

示例

iframe

这是一个使用 react-frame-component 通过 iframe 环境设置 EnvironmentProvider 值的示例。

import { EnvironmentProvider } from "@chakra-ui/react"
import Frame, { FrameContextConsumer } from "react-frame-component"

export const Demo = () => (
  <Frame>
    <FrameContextConsumer>
      {({ document }) => (
        <EnvironmentProvider value={() => document}>
          {/* Your App */}
        </EnvironmentProvider>
      )}
    </FrameContextConsumer>
  </Frame>
)

Shadow DOM

这是一个使用 react-shadow 通过 Shadow DOM 环境设置 EnvironmentProvider 值的示例。

import { EnvironmentProvider } from "@chakra-ui/react"
import { useRef } from "react"
import root from "react-shadow"

export const Demo = () => {
  const portalRef = useRef()
  return (
    <root.div ref={portalRef}>
      <EnvironmentProvider
        value={() => portalRef?.current?.shadowRoot ?? document}
      >
        {/* Your App */}
      </EnvironmentProvider>
    </root.div>
  )
}

访问上下文

使用 useEnvironmentContext 钩子来访问 RootNode、Document 和 Window 上下文。

import { useEnvironmentContext } from "@chakra-ui/react"

export const Demo = () => {
  const { getRootNode } = useEnvironmentContext()

  return <pre>{JSON.stringify(getRootNode(), null, 2)}</pre>
}

属性