ConfigProvider

配置Provider。

何时使用 #

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

如何使用 #

指定多语言文案 #

通过 <ConfigProvider locale={localeObj}> 传入语言包，以支持多语言。目前 Fusion 内置的 locale 库支持中英繁日四种语言，覆盖各组件的简单词汇，例如：确定、取消、展开、收起、下一页等， 简单词汇映射表可参考 https://unpkg.com/@alifd/next/lib/locale/

(ConfigProvider 提供简单组件简单词汇国际化能力，由于日期时间的国际化较为特殊，例如中国的日历是从周一到周日，美国的日历是从周日到周六等，时间相关的组件如DatePicker等需要国际化，请查看相应组件文档。)

可通过两种方式设置多语言文案，两种方式接收的对象格式略有不同:

• 1.设置组件自身 locale 属性

{
    key1: value1,
    key2: value2
}

• 2.ConfigProvider 的 locale 属性 (推荐)

{
    component1: {
        key1: value1,
        key2: value2
    },
    component2: {
        key1: value1,
        key2: value2
    }
}

以 locale 为例（其他属性如prefix等，同理），被 ConfigProvider.config() 设置过的组件（基础组件默认都被设置过），生效的 locale 优先级顺序为:

props 方式的 locale > 最近 ConfigProvider 的 locale > 更远父级 ConfigProvider 的 locale

以下面伪代码为例，即：CLocale > BLocale > ALocale

<ConfigProvider locale={ALocale}>
    <ConfigProvider locale={BLocale}>
        <Button locale={CLocale} />
    </ConfigProvider>
</ConfigProvider>

(注： 由于Dialog.show() Message.show() 等函数式方法的特殊性，他们的将默认读取页面上的root context。当页面上有多个包含<ConfigProvider/> 的 ReactDOM.render()方法调用时，由第一个渲染的决定root context)

import { ConfigProvider, DatePicker } from '@alifd/next';

const localeDatePicker = {
    placeholder: 'localeDatePicker placeholder',
};

const localeGlobal = {
    DatePicker: {
        placeholder: 'localeGlobal placeholder',
    },
};

class App extends React.Component {
    render() {
        return (
            <div>
                <ConfigProvider locale={localeGlobal}>
                    <DatePicker /> should be 'localeGlobal placeholder'
                </ConfigProvider>
                <br />
                <br />
                <ConfigProvider locale={localeGlobal}>
                    <DatePicker locale={localeDatePicker} /> should be 'localeDatePicker
                    placeholder'
                </ConfigProvider>
            </div>
        );
    }
}

根据引入组件库方式的不同(CDN直接引用、作为依赖引用)，使用语言包的方式略有差异，具体见如下代码：

import { ConfigProvider, DatePicker } from '@alifd/next';
import enUS from '@alifd/next/lib/locale/en-us';
// import zhCN from '@alifd/next/lib/locale/zh-cn';
// import zhHK from '@alifd/next/lib/locale/zh-hk';
// import zhTW from '@alifd/next/lib/locale/zh-tw';
// import jaJP from '@alifd/next/lib/locale/ja-jp';

// 如果应用中直接引入的是 cdn 上的 next-with-locales.js 文件
// 需要按照下面的方式引入国际化文案文件
// const { ConfigProvider, DatePicker, locales } = window.Next;
// const enUS = locales['en-us'];

class App extends React.Component {
    render() {
        return (
            <ConfigProvider locale={enUS}>
                <DatePicker />
            </ConfigProvider>
        );
    }
}

如果内置的 locale 库不满足你的需求(比如想支持法语、德语、西班牙语)，你也可以参考 https://unpkg.com/@alifd/next/lib/locale/ 来自定义语言包，按照如下格式传入给 locale 即可：

{
    DatePicker: {
        datePlaceholder: 'Select date',
        monthPlaceholder: 'Select month',
        yearPlaceholder: 'Select year',
        rangeStartPlaceholder: 'Start date',
        rangeEndPlaceholder: 'End date',
        ok: 'OK',
        clear: 'Clear'
    },
    Dialog: {
        // ...
    },
    // ...
}

修改组件类名前缀 #

1. 为你的应用包裹 ConfigProvider，并设置相应的 prefix

   entry.jsx

   class App extends React.Component {
       render() {
           return (
               <ConfigProvider prefix="my-">
                   <div>
                       <Input />
                       <Button>Submit</Button>
                   </div>
               </ConfigProvider>
           );
       }
   }
   

2. scss 入口文件中在引入主题 scss 文件前，设置相应的 $css-prefix

   entry.scss

   $css-prefix: 'my-';
   @import '~@alifd/theme-xxx/index.scss';
   

开启 Pure Render #

import { ConfigProvider, DatePicker } from '@alifd/next';

class App extends React.Component {
    render() {
        return (
            <ConfigProvider pure>
                <DatePicker />
            </ConfigProvider>
        );
    }
}

全局 ConfigProvider #

import { ConfigProvider } from '@alifd/next';
import locale from './locale';

const { config } = ConfigProvider;

class Component extends React.Component {
    static propTypes = {
        prefix: PropTypes.string,
        locale: PropTypes.object,
        pure: PropTypes.bool,
    };

    static defaultProps = {
        prefix: 'next-',
        locale: locale,
        pure: false,
    };

    render() {
        const { prefix, locale, pure } = this.props;
        // ...
    }
}

export default config(Component);

代码演示 #