Intl

• category: Intl
• chinese: 国际化
• type: Intl

何时使用

react-intl 的 rax 版本，去除了 react 依赖， 去除 FormattedHTMLMessage api 。 其他保持原样。

API

IntlProvider

注入文案到 childContext

import View from 'nuke-view';
import Text from 'nuke-text';
import {FormattedMessage, IntlProvider,injectIntl } from 'nuke-intl';

const I18n = {
  en: {
    cancel: 'cancel',
    confirm: 'OK',
  },
  zh: {
    cancel: '取消',
    confirm: '确认',
  },
};

class Label extends Component {
  constructor(props) {
    super(props);
    this.state = {};
  }

  render() {
    const { intl, text } = this.props;
    const newText = intl.formatMessage({ id: text });
    return <Text>{newText}</Text>;
  }
}

const I18NLabel=injectIntl(Label);

let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
    }

    render() {
        return (
        <IntlProvider locale="en" messages={I18n.en}>
            <View>
                <I18NLabel text="confirm" />
            </View>
        </IntlProvider>
        );
    }
}

FormattedMessage

配合 IntlProvider 使用

const I18n = {
  en: {
    cancel: 'cancel',
    confirm: 'OK',
  },
  zh: {
    cancel: '取消',
    confirm: '确认',
  },
};

let App = class NukeDemoIndex extends Component {
    constructor() {
        super();
    }

    render() {
        return (
        <IntlProvider locale="en" messages={I18n.en}>
            <View>
                <FormattedMessage id="cancel" tagName={Text} defaultMessage="Hello, Howard" />
                <FormattedMessage id="xx" tagName={Text} defaultMessage="zero" />
            </View>
        </IntlProvider>
        );
    }
}