Question

我正在开发一个将在不同国家/地区启动的react应用程序。在每个国家/地区，某些组件将相同，而其他组件将有所不同。

即

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

Germany will have
  - Component A
  - Component D

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

我们使用全局env var来告诉要加载的站点。（{en，fr等）

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

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

直到今天我想到的想法：

在每个国家/地区创建一个站点。（由于过多的DRY，这是个大问题。共有许多组件）
有条件的渲染（由于存在多个国家，所以感觉很乱，导致无休止的if else）
高阶组件，它返回父容器组件内的所有组件（感觉很好，但是我不想重新发明轮子，我想先在这里问一下）

有NPM软件包可以帮助我对此进行存档吗？

我应该从头开始吗？

非常感谢您。

Answer 1

不确定我是否明白这一点（很抱歉，是这样）。您无需创建两个站点。您只需要以传递的结构（类似）来组织网站内容：

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<ul>
   <li><a class="foo" id="one">some text</a></li>
   <li><a class="foo" id="two">some text</a></li>
   <li><a class="foo" id="three">some text</a></li>
</ul>

您可以通过以下几行（从用户的浏览器中）获取首选语言。

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

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

React中的多语言应用在React中进行条件渲染

1 个答案: