SuperAPI AI 工具集

intlayer-react

前端与建站

查看项目

更新于 10-15 17:23

技能介绍

用途:将 Intlayer 国际化能力接入 React 组件,支持在组件级别声明和读取多语言内容。

核心思路:Intlayer 提倡组件级内容声明,不依赖单个巨型全局翻译文件。内容写在组件旁邻近的 *.content.ts 文件中,由使用它的 React 组件消费。

工作流:创建一个已翻译组件通常需要两个文件,一是声明文件(如 myComponent.content.ts)定义字典,key 必须唯一并与 useIntlayer() 传入的值一致,内容用 t() 标注各语言;二是实现文件(如 MyComponent.tsx),通过 react-intlayer 的 useIntlayer 钩子读取该字典。

使用方式:在组件中 const content = useIntlayer("my-dictionary-key");。内容节点可直接作为 React 节点渲染({content.text}),需要字符串时使用 .value(如 src={content.text.value})。

支持环境:Vite 与 React、Create React App、React Router v7、React Router v7 文件系统路由、Tanstack Start、React Native 与 Expo、Lynx 与 React。

相关导出:React Intlayer Provider、MarkdownRenderer、T、useDictionary、useI18n、useIntlayer、useLocale。

限制:资料未提供安装命令、具体配置步骤、价格与收费信息,暂未提供。