在ReactJS中实现多语言支持

我正在构建一个小型电子商务解决方案，后端使用moltin API，前端使用ReactJS。我已经完成了我的应用程序，我想实现西班牙语。用户应该能够点击西班牙国旗，网站（所有组件）将立即翻译成西班牙语

我尝试过很多npm软件包，但都不起作用——我不使用Redux，我只有一堆ReactJS组件、布局文件和路由。我已经看到了一些关于如何在只有一个组件的情况下实现这一点的示例，但我仍然不知道如何更改不同组件中的语言

---

我也在使用react路由器。

我最终使用了react-x18n npm软件包。它易于使用，解决了所有的翻译问题。一旦触发单击功能并更改语言，所有组件将在一秒钟内翻译

您可以维护一个JSON文件，其中包含英语西班牙语的映射，当有人单击西班牙语标志时，页面将重新加载，您的所有英语文本现在将以西班牙语显示。所有组件的文本都应该类似于语言[“es”][“buttonText”]>这样的方法对您很有用。只需在组件中导入json文件。我已经用这些语言导入了json文件，但是当有人点击西班牙国旗时，会发生什么呢？组件应该如何知道应该呈现哪种语言（全部）？您可以将区域设置信息保存在queryParams中。这不是最理想的解决方案，但可以工作。基本上，您需要有一个

translate

函数作为React上下文，以便内部的所有组件都可以使用此函数。当然，

translate

函数需要知道您当前的语言和翻译哈希。已经用i18next标记了…使用react-i18next。负责加载翻译并在语言更改时触发重新加载：查看示例：或doucmentation:。在gibhub向我提问（维护i18next和react-i18next）。