使用 Yahoo 的 react-intl 使用 React.js 进行国际化

Posted 2023-02-19

【中文标题】使用 Yahoo 的 react-intl 使用 React.js 进行国际化

【英文标题】：Internationalization with React.js using Yahoo's react-intl

【发布时间】：2016-06-27 11:47:28

【问题描述】：

我正在尝试在 React.js 应用程序中支持不同的语言，并发现 react-intl 是一个不错的候选者。他们一直是transitioning into V2，但我很难弄清楚这一切是如何协同工作的。 example app 过于复杂，涉及客户端/服务器架构。我只想要一个没有服务器的页面。

看起来步骤是这样的：

使用react-intl的defineMessage定义消息 使用addLocaleData 添加语言环境 使用构建脚本将扁平化消息数据构建到每个语言环境的文件中

我已完成这些步骤，但不知道如何显示消息。我将我的 React 组件包裹在 <IntlProvider> 中。 react-intl V2 github 问题真的很长，我一直在努力寻找答案。谁能提供一个简单的工作示例？

【问题讨论】：

你想出了一些例子吗，如果你已经完成或找到了一个使用 reac-intl 的基本示例，请分享，因为我也面临与你相同的问题

【参考方案1】：

这是一个从react-intl wiki修改的示例

查看下面的代码，在<IntlProvider> 中，您需要传入messages=post.title: "Hello World", post.body: "Amazing Content" 的道具。这将是您从构建脚本中翻译的带有键的对象。

将语言环境切换为“en”将加载默认消息。 addLocaleData 添加用于翻译数字和日期格式的数据，而不是字符串。

import React, PropTypes from 'react';
import ReactDOM from 'react-dom';

import addLocaleData from 'react-intl';
import en from 'react-intl/locale-data/en';
import fr from 'react-intl/locale-data/fr';
import es from 'react-intl/locale-data/es';
import pt from 'react-intl/locale-data/pt'

addLocaleData([...en, ...fr, ...es, ...pt]);

import 
    injectIntl,
    IntlProvider,
    FormattedRelative,
    FormattedMessage
 from 'react-intl';

const PostDate = injectIntl((date, intl) => (
    <span title=intl.formatDate(date)>
        <FormattedRelative value=date/>
    </span>
));

const App = (post) => (
    <div>
        <h1>post.title</h1>
        <p><PostDate date=post.date/></p>
        <div>post.body</div>
    </div>
);

ReactDOM.render(
    <IntlProvider locale='pt' messages=post.title: "Olá Mundo", post.body: "conteúdo surpreendente">
        <App
            post=
                title: <FormattedMessage id='post.title' defaultMessage='Hello, World!' />,
                date: new Date(1459913574887),
                body: <FormattedMessage id='post.body' defaultMessage='Amazing Content!' />,
            
        />
    </IntlProvider>,
    document.getElementById('container')
);

【讨论】：

知道如何添加导入 'import en from 'react-intl/locale-data/en';'动态基于用户的区域设置？

嗨@Santhosh。你能创造一个新的问题吗？与此分开。我很乐意回答。

当然你可以在这里发表你的建议***.com/questions/41282510/…

我不明白这些内置的语言翻译是什么。 react-intl/locale-data/en

【参考方案2】：

我认为这回答了这个问题。然而，它基于使用 3rd 方翻译服务并建议覆盖翻译文件。我个人所做的是根据脚本生成文件并使用它手动将我的翻译写入另一个文件。 https://medium.freecodecamp.com/internationalization-in-react-7264738274a0

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效

这篇文章是一个教程，它的核心部分是第一个和最后一个字母之间的每一行。