自定义 React Context Providers

随着你在 Admin Panel 中添加越来越多的 Custom Components，你可能会发现需要为应用添加额外的 React Context。Payload 允许你注入自己的 context providers，从而可以导出自定义 hooks 等。

要添加 Custom Provider，可以在 Payload Config 中使用 admin.components.providers 属性：

import { buildConfig } from 'payload'

export default buildConfig({
  // ...
  admin: {
    components: {
      providers: ['/path/to/MyProvider'], // highlight-line
    },
  },
})

然后按照以下方式构建你的 Custom Provider：

'use client'
import React, { createContext, use } from 'react'

const MyCustomContext = React.createContext(myCustomValue)

export function MyProvider({ children }: { children: React.ReactNode }) {
  return <MyCustomContext value={myCustomValue}>{children}</MyCustomContext>
}

export const useMyCustomContext = () => use(MyCustomContext)

关于如何构建 Custom Components 的详细信息，请参阅 Building Custom Components。

提醒： React Context 仅存在于 Client Components 中。这意味着它们必须在文件顶部包含 use client 指令，并且不能包含仅限服务器的代码。要在此处使用 Server Component，只需用 Server Component 包裹 你的 Client Component。