在React中，在React的React中有条件渲染

Question

我正在开发一个将为不同国家/地区启动的React应用程序。在每个国家/地区，有些组成部分都是相同的，但其他组件会不同。

即

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

所以，两个站点共享相似的组件，但其中一些是唯一的。

我们使用全局env var来分辨要加载哪个站点。（en，fr等）

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

）

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

直到今天我想出的想法：

• 每个国家创建一个站点。（由于太多干燥，所以有很多共享的组件）
• 有条件的渲染（因为有几个国家，导致无尽的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
}

您可以使用以下行获得首选的语言（从用户的浏览器）。

static async getInitialProps({ req }) { const userAgent = req ? req.headers['accept-language'] : navigator.userAgent; return { userAgent }; }

在对用户效果的结果上制定一些字符串后，您将获得一系列首选语言。之后，您需要渲染通过数据（de，en，es等）