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

问题描述

我正在使用 react-18next 在整个 React 应用程序中加载翻译。我在让我的应用程序等待翻译时遇到问题。这打破了我们在 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）。

准备就绪的尝试：

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 中的全局解决方案。

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）