javascript - React 中多语言应用程序的条件渲染

Question

我正在开发一个将针对不同国家/地区推出的 react 应用程序。在每个国家/地区，某些组件会相同，但其他组件会有所不同。

即

France will have
  - Component A
  - Component B
  - Component C

Germany will have
  - Component A
  - Component D

因此，两个网站共享相似的组件，但其中一些是独特的。

我们使用全局环境变量来告诉加载哪个站点。 (en、fr 等)

值得一提的是，所有网站的 URL 都应该相同(上面的变量应该告诉应用程序要显示哪个组件)

处理此组件差异的最佳想法是什么？

直到今天我想到的想法:

• 每个国家/地区创建一个网站。 (因为太多的 DRY，这是一个大问题。有很多共享的组件)
• 条件渲染(感觉很hacky，因为有几个国家，导致无尽的 if else)
• 返回父容器组件内所有组件的高阶组件(感觉很好，但我不想重新发明轮子，我想先在这里问一下)

是否有 NPM 包可以帮助我存档此内容？

我应该从头开始吗？

非常感谢。

Answer 1

不确定我是否明白这一点(抱歉，如果是这样的话)。您不需要创建两个站点。您只需要以传递结构(类似于)来组织网站内容:

在包含网站内容的文件中:

const frenchData = [
  {
    idKey: 'aboutus',
    textTitel: aboutUsTextTitelFR,
    textField: aboutUsTextFieldFR
  }
];
const englishData = [
  {
    idKey: 'aboutus',
    textTitel: aboutUsTextTitelEN,
    textField: aboutUsTextFieldEN
  }
];


export const aboutusData = {
    'fr': frenchData,
    'en': englishData
}

您可以使用以下几行获取首选语言(从用户的浏览器)。

静态异步 getInitialProps({ req }) {
const userAgent = 请求？ req.headers['接受语言'] : navigator.userAgent;
返回 { 用户代理 };
}

对 userAgent 结果进行一些字符串格式化后，您将获得一组首选语言。之后，您需要渲染传递的数据(DE、EN、ES 等)