我可以找到很多关于如何在 React 应用程序中进行国际化的示例,但我找不到任何组件库。
我正在使用短语应用程序,我想知道是否有人建议如何以一种好的方式做到这一点。
我认为的选项:
最佳答案
所以我们最终使用了react-intl
,导出包裹在 IntlProvider
中的每个组件只需要任何语言环境和消息。 IntlProvider 的配置在构造函数中设置为组件状态:
this.state = {
i18nCfg: IntlUtils.init(props.language, 'SignOutMenu')
}
...然后设置在组件的
render()
: render() {
const { i18nCfg } = this.state;
return (
<IntlProvider locale={i18nCfg.language} messages={i18nCfg.messages}>
...
语言环境可以由
injectIntl
给出的父组件提供HOC<SignOutMenu language={this.props.intl.locale}/>
或使用 util 方法从浏览器中检测到
getUserLanguage()
在 init()
如果没有定义语言。您只需要注意防止在应用程序中重复出现消息 id,因此我使用命名空间字符串初始化组件,该字符串表示仅与给定组件相关的消息(在
getMessages()
中完成):
import {addLocaleData} from 'react-intl';
import en from 'react-intl/locale-data/en';
import de from 'react-intl/locale-data/de';
import messagesEn from '../locales/lang/i18n_en.json';
import messagesDe from '../locales/lang/i18n_de.json';
const defaultLanguage = 'en';
const supportedLanguages = ['en', 'de'];
export default class IntlUtils {
static init = (language, namespace) => {
// add the supported locale data
addLocaleData([...en, ...de]);
// get supported language
const lang = language && supportedLanguages.indexOf(language) > -1 ? language : IntlUtils.getUserLanguage();
// return back data for IntlProvider
return {
language: lang,
messages: IntlUtils.getMessages(lang, namespace)
}
}
static getMessages = (language, namespace) => {
let langMsgs;
switch (language) {
case 'de': langMsgs = messagesDe; break;
case 'en':
default: langMsgs = messagesEn;
}
if (langMsgs) {
const matchNS = namespace + ".";
const filtered = {};
for (var key in langMsgs) {
if (key.startsWith(matchNS)) {
filtered[key] = langMsgs[key];
}
}
return filtered;
}
}
static getUserLanguage = () => {
//if none available, take it from browser
const browserLanguage = window.navigator.userLanguage || window.navigator.language;
if (browserLanguage) {
// get the language code and store it in local prefs for nexttime
const m = browserLanguage.match(/^([a-z]+)/i);
if (m) {
return m[0];
}
}
// nothing found -> return default en
return defaultLanguage;
}
}
为了能够导入
IntlUtil
中的json文件,我必须安装“babel-plugin-inline-json-import”的 devDependency 并将其添加到 .babelrc 文件中: "plugins": [
["inline-json-import", {}]
]
我还发现使用带有方法
formatMessage()
的 injectIntl HOC在 IntlProvider 初始化为 HOC 使用 IntlProvider
实例的同一组件中无法正常工作来自上面组件的消息)。请注意,我们的语言切换机制涉及到页面的刷新,所以它就像
init()
的魅力。 .但是,当您在不刷新页面的情况下切换语言时,我不能说在使用 context 或 redux 的情况下它的效果如何。但是我们很快就会在一个这样的应用程序中使用它,所以我可能会在这里发布更新......希望这至少对您和其他人有所帮助
关于javascript - 我应该如何处理 React 组件库中的国际化?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/55924523/