babel-plugin-i18next-extract-在react组件外部提取翻译密钥

如何解决babel-plugin-i18next-extract-在react组件外部提取翻译密钥

我正在使用 i18next ， react-i18next 和 babel-plugin-i18next-extract 。

我有一个“大”静态json对象。该json对象具有与翻译键匹配的静态键。

// file: professions.js
//
// Large array with static objects
export default [
  { profession: 'translation.profession.teacher' },...
  { profession: 'translation.profession.astronaut' },];

尽管以下代码正确显示了翻译，但键的提取却无效。

import { useTranslation } from 'react-i18next';
import professions from'../data/professions.json';

function SelectProfessionComponent(){
  const { t } = useTranslation();
  return (
    <select>
    { professions.map( {profession} => {
      <option>{t(profession)}</option>
    })}
    </select>
  )
}

我如何才能将babel-plugin-i18next-extract提取为可识别的“ translation.profession.teacher”，“ translation.profession.teacher”和其他文件，作为来自文件professional.json的翻译键？

解决方法

我找到了一种方法（也许是hacky，也许不是）。

首先，我们做一个幂等函数，将其返回的结果返回。

// file: extractKey.js
export function eK(key) { return key;}

从静态数据中，我们使用上面定义的eK函数来标记充当翻译键的那些字符：

// file: professions.js
//
// Large array with static objects
import { eK } from '../extractKey';

export default [
  { profession: eK('translation.profession.teacher') },...
  { profession: eK('translation.profession.astronaut') },];

并配置babel-plugin-i18next-extract以检测函数名称eK：

// babel-plugin-i18next-extract config
{
  "tFunctionNames": ["t","eK"]
}

仅此而已。希望这对其他人有帮助。