如何使用 react-i18next 正确等待翻译

Posted 2023-02-21

【中文标题】如何使用 react-i18next 正确等待翻译

【英文标题】：How to correctly wait for Translation with react-i18next

【发布时间】：2021-04-20 05:40:46

【问题描述】：

我正在使用 react-18next 在我的整个反应应用程序中加载翻译。我在让我的应用程序等待翻译时遇到问题。这会破坏我们在 Jenkins 中的测试，因为他们在许多情况下都在搜索已翻译的密钥。

i18n.tsx：

i18n
.use(initReactI18next)
.init(
  resources, // set ressources to be used
  lng: "en", // set default language
  keySeparator: false, 
  interpolation: 
    escapeValue: false
  ,
  react: 
    useSuspense: false,
  
);

注意：我尝试使用 Suspense 和不使用 suspense，useSuspense 标志与尝试匹配（Suspense 为 true/默认）。

准备就绪的尝试：

const SiteLabel: React.FunctionComponent<ISiteLabelProps> = (props) => 
  const  t, ready  = useTranslation(undefined, 
    useSuspense: false
  );

  const getTo = (): string => 
    return "/" + props.module.toLowerCase();
  

  const getLabel = (): string => 
    return props.module.toLowerCase() + ":GEN_PAGETITLE";
  

  if(!ready)
    return (<div>Loading Content...</div>);

  return (
      <ConfirmLink
        content=t(getLabel())
        dirty=props.dirty
        setDirty=props.setDirty
        className=Styles.label + " id-btn-riskshield"
        to=getTo()
        toState=null
      />
  );


export default SiteLabel;

有悬念的尝试：

const SiteLabel: React.FunctionComponent<ISiteLabelProps> = (props) => 
  const  t  = useTranslation();

  const getTo = (): string => 
    return "/" + props.module.toLowerCase();
  

  const getLabel = (): string => 
    return props.module.toLowerCase() + ":GEN_PAGETITLE";
  
    
  return (
      <Suspense fallback=<div>Loading...</div>
      <ConfirmLink
        content=t(getLabel())
        dirty=props.dirty
        setDirty=props.setDirty
        className=Styles.label + " id-btn-riskshield"
        to=getTo()
        toState=null
      />
      </Suspense>
  );


export default SiteLabel;

这两个版本似乎都不适合我，我可以看到短暂显示的翻译键。我是否需要更深入，直到实际写出翻译而不是传递给下一个道具或我犯的错误是什么？我没有使用 next.js 进行构建/部署。我更喜欢 app.tsx 中的全局解决方案。

【参考方案1】：

尝试使用wait 选项

react: wait: true, useSuspense: false