React-i18next 悬念

Question

我正在使用 React-i18next 就像示例一样

import React, { Suspense } from 'react';
import { useTranslation } from 'react-i18next';

function App() {
  return (
    <Suspense fallback="loading">
      <MyComponent />
   </Suspense>
   );
}

但是 Suspense 正在破坏我的其他组件之一，即 react-masonry-layout。是否可以不使用 Suspense？

谢谢。

Answer 1

react-i18nnext 默认使用 Suspense。如果您不想使用它，则必须在配置中指定它。如果您有 i18n 配置文件，则可以在 init 对象的 react 部分将 useSuspense 标志设置为 false。

//Example config
i18n
.use(Backend)
.use(LanguageDetector)
.use(initReactI18next)
.init({
   fallbackLng: "en",
   debug: true,
   resources: {

   },
   interpolation: {
     escapeValue: false,
   },
  react: {
     wait: true,
     useSuspense: false,
  },
})

或者您可以在组件中设置标志。

<MyComponent useSuspense={false} />

请注意，选择不使用 Suspense 有其含义。您必须编写检查来处理“未准备好”状态，即：在状态未准备好时渲染加载组件，并在状态准备好时渲染您的组件。不这样做将导致在加载之前渲染您的翻译。