LocaleProvider 国际化

如果项目中使用的是 1.x 版本的基础组件（@alifd/next），请在左侧导航顶部切换组件版本。

安装方法

在命令行中执行以下命令npm install @icedesign/base@latest -S

代码示例

基本

使用LocaleProvider包裹组件。

查看源码在线预览

import { LocaleProvider, Select } from "@icedesign/base";
/* eslint-disable react/no-multi-comp */
// 组件
class MyComponent extends React.Component {
  static propTypes = {
    locale: React.PropTypes.object
  };
  render() {
    const { locale } = this.props;
    return <div ref="div">{locale.content}</div>;
  }
}
const LocaleMyComponent = LocaleProvider(MyComponent);
LocaleMyComponent.LOCALE = {
  "en-us": {
    content: "en-us"
  },
  "zh-cn": {
    content: "zh-cn"
  }
};
// 应用
class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      lang: "zh-cn"
    };
    this.handleChange = this.handleChange.bind(this);
  }
  handleChange(lang) {
    this.setState({
      lang
    });
    // 获取被包裹组件的引用
    console.log(this.refs["locale-my-component"].getInstance());
  }
  render() {
    const { lang } = this.state;
    return (
      <div>
        <Select
          style={{ marginBottom: "20px" }}
          value={lang}
          onChange={this.handleChange}
        >
          <Option value="zh-cn">zh-cn</Option>
          <Option value="en-us">en-us</Option>
        </Select>
        <LocaleMyComponent language={lang} ref="locale-my-component" />
      </div>
    );
  }
}
ReactDOM.render(<App />, mountNode);

相关区块

暂无相关区块