[react] 怎么实现React组件的国际化呢？

[haizhilin2013]

trafficstars

[react] 怎么实现React组件的国际化呢？

[DoubleBlock]

React-intl

[pomelovico]

通用的方案是 i18next 以及 react-i18next

[liuyingbin19222]

词汇较少时 ， 可以配置语言包 , json 文件 ， 配对。

[echoLC]

依赖于 i18next 的方案，对于庞大的业务项目有个很蛋疼的问题，那就是json文件的维护。每次产品迭代都需要增加新的配置，那么这份配置由谁来维护，怎么维护，都会有很多问题，而且如果你的项目要支持几十个国家的语言，那么这几十份文件又怎么维护。

所以现在大厂比较常用的方案是，使用AST，每次开发完新版本，通过AST去扫描所有的代码，找出代码中的中文，以中文为key，调用智能翻译服务，去帮项目自动生成json文件。这样，再也不需要人为去维护json文件，一切都依赖工具进行自动化。目前已经有大厂开源，比如滴滴的 di18n，阿里的kiwi。

[hal9112508]

安装并引入国际化库：首先，你可以选择一个适合的国际化库，比如react-intl、i18next等，然后在你的项目中安装并引入这个库。

配置国际化资源文件：创建一个包含不同语言版本的文本资源文件，比如英文、中文等，然后将这些文本资源文件导入到你的项目中。

使用国际化库提供的组件和方法：根据所选的国际化库，使用相应的组件和方法来实现文本的国际化。通常，你需要使用国际化库提供的组件来包裹需要国际化的文本，或者使用相应的方法来获取和显示对应语言版本的文本。

根据用户语言设置显示文本：根据用户的语言设置，动态地选择并显示对应的语言版本的文本。你可以根据用户的偏好语言设置或者浏览器的语言设置来确定要显示的文本语言版本。

可选：处理日期、时间、数字等其他国际化内容：除了文本外，你可能还需要处理日期、时间、数字格式化等其他国际化内容，这时你可以使用国际化库提供的方法来处理这些内容的国际化。

以下是一个使用react-intl库实现React组件国际化的简单示例：

import React from 'react'; import { FormattedMessage, IntlProvider } from 'react-intl';

const messages = { en: { greeting: 'Hello!', }, fr: { greeting: 'Bonjour!', }, };

const App = ({ locale }) => { return ( <IntlProvider locale={locale} messages={messages[locale]}>

<FormattedMessage id="greeting" />

</IntlProvider> ); };

export default App; 在这个示例中，我们使用了react-intl提供的FormattedMessage组件来显示国际化的文本，并使用IntlProvider组件来动态地根据用户选择的语言版本来显示对应的文本。