React-i18next：如何用t()函数获取嵌套动态键action[EDIT].title

1. 明确翻译键的路径 #

你的EN.js中，action是顶层翻译对象，[EDIT]对应的实际键名是字符串"EDIT"（因为EDIT常量的值就是"EDIT"），所以完整的翻译键路径为 action.EDIT.title。

2. 调用t()函数的代码示例 #

在React组件中，通过useTranslation钩子获取t函数后，直接传入完整键路径即可：

import { useTranslation } from 'react-i18next';

function YourComponent() {
  const { t } = useTranslation();

  // 调用t函数获取"Edit"
  const editTitle = t('action.EDIT.title');

  return <div>{editTitle}</div>;
}

3. 优化：复用常量避免硬编码 #

如果想避免硬编码键名，可在EN.js中导出EDIT常量，然后动态拼接键路径：
首先修改EN.js导出常量：

// EN.js
export const EDIT = "EDIT";
export const DELETE = "DELETE";

export default {
  action: {
    [EDIT]: {
      title: 'Edit',
    },
    [DELETE]: {
      title: 'Delete',
    },
  }
};

然后在组件中导入并使用：

import { useTranslation } from 'react-i18next';
import { EDIT } from './path/to/EN.js';

function YourComponent() {
  const { t } = useTranslation();
  const editTitle = t(`action.${EDIT}.title`);

  return <div>{editTitle}</div>;
}

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