ConfigProvider 修改wind配置

开发指南

何时使用

• 修改组件类名前缀，Next 组件类名的默认前缀都是 'next-'，如 'next-btn'，你可能在以下两种情况下想改变这个默认前缀：
  • 自定义组件品牌，如 'my-btn'，'my-select'
  • 一个页面中同时引入两个主题，防止相同类名样式互相覆盖
• 实现多语言文案切换
• 开启 Pure Render 模式，提高性能，注意同时可能会带来副作用、

基本

最简单的用法，展示 ConfigProvider 是如何工作的。

APIs

ConfigProvider

ConfigProvider.config(Component)

传入组件，生成受 ConfigProvider 控制的 HOC 组件，如果组件没有声明 shouldComponentUpdate 方法，会添加如下 shouldComponentUpdate 方法以支持 ConfigProvider 的 pure 属性

Component.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
    if (this.props.pure) {
        return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
    }

    return true;
};

ConfigProvider.getContextProps(props, displayName)

传入组件的 props 和 displayName，得到和 childContext 计算过的包含有 preifx/locale/pure 的对象，一般用于通过静态方法生成脱离组件树的组件。

ConfigProvider.getContext()

通过该方法可以获取到 ConfigProvider 的上下文，格式如下。若有多层级 ConfigProvider 嵌套，会返回merge后的结果，关系近的优先。

{
    prefix: nextPrefix,
    locale: nextLocale,
    pure: nextPure,
    warning: nextWarning
}

ConfigProvider.initLocales(locales)

配置所有语言包, 可配合 ConfigProvider.setLanguage 方法，确定组件使用的语言包。

ConfigProvider.initLocales({
    'zh-cn': {},
    'en-us': {}
});

ConfigProvider.setLanguage(language)

设置语言，参数 language 需要能在 ConfigProvider.initLocales 方法传入的参数的 key 中找到， 默认为 zh-cn

ConfigProvider.setLanguage('zh-cn');

ConfigProvider.setLocale(locale)

直接设置语言包

// 相当于 同时用ConfigProvider.initLocales 和 ConfigProvider.setLanguage
ConfigProvider.setLocale({
    DatePicker: {},
    Dialog: {}
});

ConfigProvider.setDirection(dir)

设置组件展示方向，当传入 rtl时，会在组件的根DOM节点加上 dir="rtl"，同时组件展示rtl视觉。可用于阿拉伯等阅读顺序从右到左的国家。

ConfigProvider.setDirection('rtl');

ConfigProvider.getLocale()

获取当前的语言包

ConfigProvider.getLanguage()

获取当前设定的语言

ConfigProvider.getDirection()

获取当前设定的方向

Demo

支持国际化的组件

国际化