如何在React组件库中注入父项目的i18next翻译实例？

核心结论 #

可以为组件库注入父项目的i18next翻译实例，你的方案思路是对的，问题出在依赖配置和代码冗余上。

问题分析 #

• UI组件库缺少react-i18next依赖：ui/package.json里未安装react-i18next，但组件中使用了useTranslation钩子，导致组件要么无法找到钩子，要么初始化独立的i18n实例，无法继承父项目的上下文。
• 重复嵌套I18nextProvider：app/index.tsx已在最外层包裹了I18nextProvider，Layout中再次嵌套属于冗余操作，可能引发上下文冲突。
• 依赖重复安装风险：UI库和主项目都安装了i18next相关包，可能导致出现多个独立的i18n实例，Provider注入的实例无法被UI组件识别。

修复步骤 #

1. 调整UI组件库的依赖配置 #

修改ui/package.json，将i18next、react-i18next设为peerDependencies，避免重复安装，确保UI库使用主项目提供的实例：

{
  "name": "ui",
  "version": "0.0.0",
  "main": "./dist/index.js",
  "types": "./dist/index.d.ts",
  "sideEffects": false,
  "private": true,
  "scripts": {
    "build": "tsup",
    "clean": "rm -rf dist",
    "dev": "tsup --watch",
    "lint": "eslint src/*.ts*"
  },
  "files": [
    "dist",
    "src"
  ],
  "peerDependencies": {
    "@types/react": "^17.0.43",
    "@types/react-dom": "^17.0.14",
    "i18next": "^21.6.14",
    "react": "^17.0.2",
    "react-i18next": "^11.16.2"
  },
  "devDependencies": {
    "i18next-browser-languagedetector": "^6.1.4",
    "i18next-http-backend": "^1.4.0",
    "tsup": "^5.10.1",
    "typescript": "^4.6.3"
  },
  "tsup": {
    "clean": true,
    "dts": true,
    "external": [
      "react",
      "i18next",
      "react-i18next"
    ],
    "format": [
      "cjs"
    ],
    "entryPoints": [
      "src/index.tsx"
    ],
    "loader": {
      ".svg": "dataurl"
    }
  }
}

• 将i18next、react-i18next移到peerDependencies，声明UI库依赖主项目提供的这些包
• 在tsup的external数组中添加i18next和react-i18next，确保打包时不将这些库打包进UI组件
• 把仅开发时需要的依赖移到devDependencies

2. 移除冗余的I18nextProvider #

修改app/layout/index.tsx，去掉重复的I18nextProvider：

import React from 'react';
import { useTranslation } from 'react-i18next';
import { Temp } from 'ui';

const Layout: React.FC = () => {
  const { t } = useTranslation();
  return (
    <>
      <Temp />
    </>
  );
};

export default Layout;

主项目最外层的I18nextProvider已能为所有子组件（包括UI库组件）提供上下文，无需重复包裹。

3. 确保UI组件正确使用上下文 #

UI组件中的useTranslation无需额外配置，只要父组件树存在I18nextProvider，就能自动获取主项目的i18n实例：

import React from 'react';
import { useTranslation } from 'react-i18next';

const Temp: React.FC = () => {
  const { t } = useTranslation();
  return <div>{t('sidebar.clients')}</div>;
};

export default Temp;

4. 重新安装依赖并构建UI库 #

在UI库目录执行：

npm install
npm run build

然后在主项目目录重新安装依赖：

npm install

验证 #

启动主项目后，UI组件应该能正确渲染主项目加载的翻译内容，t('sidebar.clients')会显示对应的翻译文本。

内容的提问来源于stack exchange，提问作者Ugnius Malūkas