国际化

@lh-ui/react 的文案全部来自 @lh-ui/share/locales，本库不持有任何文案副本。

语言包

内置两个语言包，均可从包入口直接引入：

import { zhCN, enUS } from '@lh-ui/react'

语言包	locale 值
zhCN	zh-CN（默认）
enUS	en-US

通过 ConfigProvider 切换

import { LhConfigProvider } from '@lh-ui/react'

export default function App() {
  return (
    <LhConfigProvider locale="en-US">
      <YourApp />
    </LhConfigProvider>
  )
}

LhConfigProvider 内部会在 useEffect 里调用 lhlocale.setLocale(locale)，全局生效（包括命令式服务 message 等）。

在组件内读取

用 useLhLocale() 获取翻译函数：

import { useLhLocale } from '@lh-ui/react'

function Demo() {
  const { t, tm, getLocale } = useLhLocale()

  return (
    <>
      <p>当前语言：{getLocale()}</p>
      <p>{t('input.placeholder')}</p>
      {/* t 的第二个参数是动态插值 */}
      <p>{t('form.required', '此项为必填')}</p>
    </>
  )
}

方法	说明
t(path, fallbackOrParams?)	翻译，第二参数为字符串时作兜底、为对象时作插值；缺省时回退到路径原文
tm(path)	取原始消息（数组形态的条目）
getLocale()	当前 locale 值
version	语言包版本号（内部用于触发重渲染）

响应式更新

useLhLocale 用 useSyncExternalStore 订阅 share 的全局 locale 单例：任何地方调用 lhlocale.setLocale()，所有消费组件自动重渲染。

import { lhlocale } from '@lh-ui/react'

// 命令式切换（不经过 ConfigProvider 时）
lhlocale.setLocale('en-US')

扩展语言包

语言包是普通对象，可以自行扩展后传给 LhConfigProvider。键的层级结构参考 zhCN。

SSR

useSyncExternalStore 的 server snapshot 与 client snapshot 都是 version，服务端不会因订阅产生水合不匹配。