如何避免i18next <Trans>组件中嵌套组件重复翻译？

核心思路是将翻译逻辑统一放在外层中，让可复用组件仅负责渲染结构与样式，不自行处理翻译，以下是几种简洁的实现方式：

方式1：纯展示型可复用组件（最简洁） #

如果组件仅做样式/结构封装，不需要动态文本，直接让组件接收children，完全由外层控制翻译内容：

// 可复用组件 ActionLink.jsx
export const ActionLink = ({ children }) => {
  return <a className="action-link">{children}</a>;
};

父组件使用时直接嵌套：

import { Trans } from 'react-i18next';
import { ActionLink } from './ActionLink';

const ProfilePage = () => {
  return (
    <Trans i18nKey="profile.edit_tip">
      请通过 <ActionLink>编辑资料</ActionLink> 修改个人信息
    </Trans>
  );
};

对应的翻译文件（zh-CN.json）：

{
  "profile": {
    "edit_tip": "请通过 <0>编辑资料</0> 修改个人信息"
  }
}

return (<Trans>会自动将`<ActionLink>`映射为占位符`<0>`，用翻译文本填充，组件无需处理任何翻译逻辑。

## 方式2：组件需接收动态文本
如果组件需要根据场景展示不同文本，但不想内部维护翻译，可让组件接受翻译后的文本作为props，外层<Trans>通过插值传递：

```jsx
// 可复用组件 Button.jsx
export const Button = ({ label }) => {
  return <button className="btn-primary">{label}</button>;
};
```

父组件使用时，通过对象语法指定翻译key：
```jsx
import { Trans } from 'react-i18next';
import { Button } from './Button';

const FormPage = () => {
  return (
    <Trans i18nKey="form.submit_prompt">
      确认信息后，点击 <Button label={{ t: 'button.submit' }} /> 提交表单
    </Trans>
)

);
};

翻译文件：
```json
{
  "form": {
    "submit_prompt": "确认信息后，点击 <0>提交</0> 提交表单"
  },
  "button": {
    "submit": "提交"
  }
}

return (<Trans>会自动解析`label={{ t: 'button.submit' }}`，将对应的翻译文本传入Button组件，避免组件内部重复调用`t()`。

## 方式3：组件需动态切换文本
如果组件需要根据状态切换文本，可让外层<Trans>传递已翻译的动态内容，组件仅负责渲染：

```jsx
// 可复用组件 StatusBadge.jsx
export const StatusBadge = ({ statusText }) => {
  return <span className={`badge badge-${statusText}`}>{statusText}</span>;
};
```

父组件根据状态获取翻译后的值，再传入组件：
```jsx
import { Trans, useTranslation } from 'react-i18next';
import { StatusBadge } from './StatusBadge';

const OrderPage = () => {
  const { t } = useTranslation();
  const orderStatus = 'pending'; // 假设从接口获取状态
  const statusText = t(`order.status.${orderStatus}`);

  return (
    <Trans i18nKey="order.status_tip">
      当前订单状态：<StatusBadge statusText={statusText} />
)

</Trans>

);
};

翻译文件：
```json
{
  "order": {
    "status_tip": "当前订单状态：<0></0>",
    "status": {
      "pending": "待处理",
      "completed": "已完成"
    }
  }
}

关键注意点 #

• 移除可复用组件内部所有t()调用或使用，将翻译权完全交给外层
• 翻译文件中仅需维护外层语句和独立的文本key，无需重复嵌套组件的翻译内容

内容的提问来源于stack exchange，提问作者Tim Nikischin