9

我正在使用 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/default）。

尝试准备好：

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

4

1 回答 1

0

尝试wait选项

react: { wait: true, useSuspense: false }

于 2021-12-21T14:40:40.843 回答