如何模仿 antd 写一个 ConfigProvider

公众号：JavaScript与编程艺术

假如我们要在子组件中获取到语言但不通过 props 传入，这种全局设置很适合通过 Provider 实现。

不废话大家 Copy 来用就行。

使用

<ConfigProvider locale='en-US'>
  <ForbiddenPage />
</ConfigProvider>

实现

核心是 createContext 和 useContext：

import type { ISupportedLocale } from '@/utils/i18n'
import React, { type FC, createContext } from 'react'

interface IProps {
  locale?: ISupportedLocale
  children?: React.ReactNode
}

interface LocaleContextProps {
  locale?: ISupportedLocale
}

export const LocaleContext = createContext<LocaleContextProps | undefined>(undefined)

export const ConfigProvider: FC<IProps> = ({ locale, children }) => {
  return <LocaleContext.Provider value={{ locale }}>{children}</LocaleContext.Provider>
}

组件内通过 React.useContext 获取 locale：

export const Component: React.FC<{ locale?: string }> = ({ locale }) => {
 const ctx = useContext(LocaleContext)
 const lng: string = locale ?? ctx?.locale ?? 'zh-CN'
 
 ...
}

完结！