Question

我可以通过执行i18n.addResources(['en', en, namespace])来加载组件（例如页面或本机屏幕）内部的翻译块。

我本能地使用componentDidMount方法执行此操作，该方法通常是这种操作的首选方法，并且创建了一个小的实用程序组件来加载我的翻译文件。

class NamespaceLoader extends React.Component<NamespaceLoaderProps> {
  public componentDidMount() {
    this.props.resources.map(resource =>
      this.props.i18n.addResources(...resource),
    )
  }

  public render() {
    return this.props.children
  }
}

但是，这样做是为了在加载翻译之前等待初始渲染。这样会在控制台中触发诸如i18next::translator: missingKey fr HomeRecord titleFieldLabel titleFieldLabel之类的消息，因为使用<NamespacesConsumer />的孩子也将在加载翻译之前经历初始渲染。

我发现了三种防止这种行为的方法：

使用contructor而非componentDidMount加载翻译。这样会阻止初始渲染，但要确保所有翻译在发生时都可用。
将wait={true}传递给每个<NamespacesConsumer />，这不会阻止整个屏幕的初始渲染，但是要求开发人员记住将prop传递给每个组件，因为它默认为false。
像这样覆盖defaultProps中的<NamespacesConsumer />：

NamespacesConsumer.defaultProps = {
 wait: true,
}

此问题的首选解决方案是什么？在我看来，不建议使用构造函数，但是通过要求开发人员指定wait={true}来加重所有开发人员的负担似乎更容易出错。

Answer 1

我在the documentation中发现，初始化wait对象时可以将true缺省为i18n：

i18n
  .use(languageDetector)
  .use(reactI18nextModule)
  .init({
    //...
    react: {
      wait: true,
    },
  })

这可能是防止控制台中出现任何警告的最佳解决方案。

在构造函数vs componentDidMount中加载翻译

1 个答案: