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

我试图在React.js应用程序中支持不同的语言，并发现react-intl是一个很好的候选人。他们一直在transitioning into V2，但我很难弄清楚它们是如何一起工作的。 example app太复杂，涉及客户端/服务器体系结构。我只想要一个没有服务器的页面。使用Yahoo的React.js进行国际化react-intl

它看起来像步骤是这样的：

使用react-intl的defineMessage
使用addLocaleData
构建扁平化的消息数据添加区域设置为每个区域设置的文件使用一个构建脚本定义的消息

我已经完成了这些步骤，但我不知道如何显示消息。我已将我的React组件包装在<IntlProvider>中。 react-intl V2 github问题真的很长，我一直在通过它试图找到答案。任何人都可以提供一个简单的例子

来源

2016-03-12 Reed G. Law

你弄明白了一些例子，请分享一下如果你已经完成或者发现了一个基本的例子，使用了reac-intl，因为我也面临着与你相同的问题 – iamsaksham

这是从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') 
);

来源

2016-05-24 14:36:12 slchap5

任何想法如何添加imports from import from '反应-国际/区域设置的数据/ EN';”动态基于用户的区域设置？ – Santhosh

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

当然你可以发布你的建议在这里http://stackoverflow.com/questions/41282510/how-to-add-locale-data-dynamically-using-react-intl – Santhosh

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

来源

2017-06-23 20:15:18

虽然这个链接可能回答这个问题，但最好在这里包含答案的基本部分，并提供供参考的链接。如果链接页面发生变化，仅链接答案可能会失效 – slfan

本文是一篇教程，其基本部分是第一封和最后一封信之间的每一行。 –

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

回答

相关问题