反应中的多语言应用程序反应中的条件渲染

Question

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

即

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

Germany will have
  - Component A
  - Component D

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

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

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

处理这种组件差异的最佳方法是什么？

直到今天我想出的想法：

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

是否有 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 }; }

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