1.0.2 • Published 6 years ago
nuke-intl v1.0.2
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>
);
}
}