react-intl国际化中如何获取字符串

Question

背景

react+react-intl做国际化

问题

需要通过把title字符串通过jsbridge传递给Native，如何最快获取到当前的语言文件？

1.如下初始化

<IntlProvider
      locale={chooseLocale()}
      messages={chooseLocaleFile()}>
            <App />    
</IntlProvider>

2.渲染DOM毫无压力

<FormattedMessage id='section_title' defaultMessage='name' />

3.可是直接通过JS传递字符串怎么办？
如下例子，”张三“如何从localeFile获取？

window.location.href = "JSBridge://alert/?message=" + "张三";

求大神解答！！！

Answer 1

开发中也遇到这个困惑，已解决哈哈；

分享下解决思路：
其实我们获取字符串根本没必要通过 react-intl, react-intl 是在DOM节点渲染阶段进行国际化，依赖于<IntlProvider />节点的 messages 参数。

而我们业务代码在DOM 节点渲染之前 或 之后（一般都在之后）进行， 所以这时候没必要 舍本逐末 去调用 react-intl， 而是获取它 messages 对应值就行！

也就是在 i18n 文件件里的 en_US.js, zh_CN.js 等文件；
这些文件都是导出一个JSON对象， 所以业务代码这样写即可：

import en_US from "./i18n/en_US";
import zh_CN from "./i18n/zh_CN";
//业务代码
let { lang } = this.state;
let name = Object.is(lang, "en")?en_US.name:zh_CN.name;
window.location.href = `JSBridge://alert/?message=${name}`;

Answer 2

利用injectintl可以注入intl对象，从而获取到messages配置。
例如：export default injectIntl(MyComponent);

class MyComponent extend Components {    
   const {messages }=this.props.intl; 
   }

https://github.com/yahoo/reac...

Answer 3

来个简洁的方法！

// 国际化注入方法
import { injectIntl } from 'react-intl';

export function language(target) {
  return injectIntl(target);
}

// 使用注解方式轻松注入国际化
@language
class MyComponent extend Components {    
    componentDidMount() {
        const {messages }=this.props.intl; 
        console.log(messages);
    }
    render() {
        return ...
    }
}