Загрузка переводов в конструкторе vs componentDidMount - PullRequest
Новая
       7

Загрузка переводов в конструкторе vs componentDidMount

0 голосов
/ 08 марта 2019

Я могу загрузить куски переводов внутри компонента (например, страницы или собственного экрана реакции), выполнив 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 />, что не заблокирует первоначальный рендеринг всего экрана, но требует от разработчика помнитьпередать реквизит каждому компоненту, поскольку по умолчанию он равен false.
  • перезаписывает defaultProps из <NamespacesConsumer /> следующим образом: 
NamespacesConsumer.defaultProps = {
 wait: true,
}

Что будет предпочтительнымрешение этой проблемы?Мне кажется, что использование конструктора не является рекомендуемой практикой, но возлагает бремя на всех разработчиков, требуя, чтобы они указали wait={true}, кажется гораздо более подверженным ошибкам.

1 Ответ

0 голосов
/ 08 марта 2019

В документации я обнаружил , что при инициализации объекта i18n по умолчанию wait - true: 

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

Это, вероятно, лучшее решение для предотвращения любого предупреждения в консоли.

...