我想在我的反应应用中为我的i18n使用ICU标准.我想存储我的语言文件,如http://userguide.icu-project.org/locale/localizing#TOC-.txt-resource-bundles:
de {
key1 { "Deutsche Sprache "
"schwere Sprache" }
key2 { "Düsseldorf" }
}
我找到了这个图书馆http://formatjs.io/react/.http://formatjs.io/支持ICU,但我找不到任何好的例子如何用我的应用程序连接我的语言文件.
我正在阅读他们的教程,似乎我可以使用该组件<FormattedMessage>.所以,例如
var intlData = {
"locales": "en-US",
"messages": {
"photos": "{name} took {numPhotos, plural,\n =0 {no photos}\n =1 {one photo}\n other {# photos}\n} on {takenDate, date, long}.\n"
}
};
React.render(
<Component {...intlData} />,
document.getElementById('example')
);
然后在我的一些组件中
...
render: function () {
return (
<p>
<FormattedMessage
message={this.getIntlMessage('photos')}
name="Annie"
numPhotos={1000}
takenDate={Date.now()} />
</p>
);
}
我最大的问题是如何转换我的语言文件,例如
en-US …我有react-router app并且想添加i18n.在react-intl 示例中,IntlProvider中包含的根组件:
ReactDOM.render(
<IntlProvider locale="en">
<App />
</IntlProvider>,
document.getElementById('container')
);
但是只有一个区域设置.如何更新应用程序以添加其他语言以及如何存储翻译的最佳方式？
我正在将react-intl迁移到3.0版本，并且需要为IE填充语言环境数据。具体来说，我想加载 en-US 的区域设置数据的填充。我只能找到@formatjs/intl-relativetimeformat/dist/locale-data/en语言环境文件。
if (!Intl.RelativeTimeFormat) {
// eslint-disable-next-line global-require
require('@formatjs/intl-relativetimeformat/polyfill');
// eslint-disable-next-line global-require
require('@formatjs/intl-relativetimeformat/dist/locale-data/en-US');
}
它会导致此错误：
Module not found: Error: Can't resolve '@formatjs/intl-relativetimeformat/dist/locale-data/en-US' in '/xxx/xxx/xxx/xxx/app'
因此，我正在 Electron 中实现一个项目，并希望在其中实现国际化。我有一个简单的组件，它使用react-intl的 FormattedMessage 和一个messages.js包含其消息描述的文件。我尝试按照文档中的教程使用 提取国际化消息@formatjs/cli，但是，即使它似乎运行正确，npm 脚本似乎也没有返回任何内容，就像它没有找到任何消息一样。我的配置和文件如下所示：
.babelrc
{
"presets": ["react-app"],
"plugins": [
[
"react-intl",
{
"idInterpolationPattern": "[sha512:contenthash:base64:6]",
"extractFromFormatMessageCall": true,
"ast": true
}
]
]
}
messages.js
import { defineMessage, defineMessages } from 'react-intl';
const scope = 'src.components.Test';
export default defineMessages({
info: {
id: `${scope}.info`,
defaultMessage: 'Info'
}
});
package.json
...
"scripts": {
"serve": "react-scripts start",
"start": "SET DEBUG=true && electron .",
"lint": "eslint .",
"lint:fix": "eslint --fix .",
"build": "react-scripts build",
"test": "react-scripts …FormatJS 消息中是否可以有 if/else？
例子
我有一个布尔变量isDay，它应该确定显示什么消息。当true我想显示“Day”一词时以及当false我想显示Night.
// message string
message = "Day";
// React component
<FormattedMessage
id="message"
values={{isDay: true}}
/>
我希望能够做类似的事情：
message = "{if isDay}Day{else}Night{endif}";
我知道上面不是实际的语法，但想知道FormatJS是否可以实现类似的功能？
使用Create React App和 TypeScript 时，会在目录中自动生成一个文件src：react-app-env.d.ts. 该文件似乎需要支持图像导入，如下所述： https: //github.com/facebook/create-react-app/issues/6560。
使用Format.JS时，我使用以下命令提取消息：
yarn extract 'src/**/*.ts*' --out-file lang/en-GB.json --id-interpolation-pattern '[sha512:contenthash:base64:6]'
但不幸的是这会导致这个错误：
warning Error: Error processing file src/react-app-env.d.ts
Debug Failure. Output generation failed
Done in 9.64s.
我需要处理 .ts 和 .tsx 文件。我试图破解搜索模式以排除特定的文件名，但我现在完全被难住了，因为我不确定其精确的规范。
作为解决方法，我可以在提取之前删除该文件，但这非常烦人！
使用react-intl我有以下消息：
serviceFee: {
en: 'Service fee: ({fee, number, percent})',
...
},
当我打电话
<FormatMessage id="serviceFee" values={{ fee: 0.0625 }} />
我希望它呈现：
服务费：6.25％
但是我得到了一个四舍五入的值：
服务费：6％
如何解决这个问题？