reactjs - コンストラクターとコンポーネントDidMountでの翻訳のロード

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 />も翻訳が読み込まれる前に最初のレンダリングを通過するためです。

この動作を防ぐ 3 つの方法を見つけました。

• contructor代わりにを使用しcomponentDidMountて翻訳をロードします。これにより、最初のレンダリングがブロックされますが、発生したときにすべての翻訳が利用できるようになります。
• wait={true}eachに渡します<NamespacesConsumer />。これにより、画面全体の初期レンダリングがブロックされませんが、デフォルトで false に設定されているため、開発者は各コンポーネントに prop を渡すことを覚えておく必要があります。
• などを上書きしdefaultPropsます<NamespacesConsumer />：

NamespacesConsumer.defaultProps = {
 wait: true,
}

この問題に対する好ましい解決策は何ですか? コンストラクターを使用することは推奨される方法ではないwait={true}ように思えますが、指定する必要があるため、すべての開発者に負担がかかり、エラーが発生しやすくなります。