Question

我有一个React应用，它使用react-intl提供翻译，并且可以很好地用于浏览器DOM渲染。我有一个使用import()根据接收到的道具处理异步语言环境/翻译的组件，然后在加载语言环境+翻译数据后，将呈现<IntlProvieder>。像这样：

// constructor

import(`react-intl/locale-data/${langCode}`).then((localeData) => {
  addLocaleData(localeData.
  this.setState({localeDataLoaded: true});
});

import(`../../translations/${locale}.json`).then((translations) => {
  this.setState({translations: translations.default});
});

render() {
  if (!this.state.translations || !this.state.localeDataLoaded) {
    return null;
  }

  return (
    <IntlProvider locale={this.props.locale} messages={this.state.translations} >
      {this.props.children}
    </IntlProvider>
  );
}

但是，在进行SSR时，setState()调用不会触发render()，从而阻止了其余应用程序的呈现。

我想知道其他人在i18n和服务器/ DOM渲染方面正在做什么。理想情况下，我不会通过网络向用户发送多余的语言环境数据，我希望使用一个组件来管理两个渲染器的所有这些。

或者，我可能最终将翻译烘焙到输出文件中，并根据语言环境生成JS文件

Answer 1

对于SSR，您必须在请求生命周期中进行渲染之前先加载东西，然后将其传递给react-intl

react-intl，异步翻译导入和SSR

1 个答案: