ConfigProvider 全局配置 Next 组件

如果项目中使用的是 0.x 版本的基础组件（@icedesign/base, @ali/ice, @alife/next），请在左侧导航顶部切换组件版本。

安装方法

  1. 在命令行中执行以下命令npm install @alifd/next@latest -S

开发指南

何时使用

  • 修改组件类名前缀，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 属性
  1. {
  2.     key1: value1,
  3.     key2: value2
  4. }
  • 2.ConfigProvider 的 locale 属性 (推荐)
  1. {
  2.     component1: {
  3.         key1: value1,
  4.         key2: value2
  5.     },
  6.     component2: {
  7.         key1: value1,
  8.         key2: value2
  9.     }
  10. }

优先级顺序为: 组件自身 locale > 最近 ConfigProvider 的 locale > 更远父级 ConfigProvider 的 locale

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

  1. import { ConfigProvider, DatePicker } from '@alifd/next';
  3. const localeDatePicker = {
  4.   placeholder: 'localeDatePicker placeholder'
  5. };
  7. const localeGlobal = {
  8.   DatePicker: {
  9.     placeholder: 'localeGlobal placeholder'
  10.   }
  11. };
  13. class App extends React.Component {
  14.     render() {
  15.         return (
  16.             <div>
  17.                 <ConfigProvider locale={localeGlobal}>
  18.                     <DatePicker /> should be 'localeGlobal placeholder'
  19.                 </ConfigProvider>
  20.                 <br />
  21.                 <br />
  22.                 <ConfigProvider locale={localeGlobal}>
  23.                     <DatePicker locale={localeDatePicker} /> should be 'localeDatePicker placeholder'
  24.                 </ConfigProvider>
  25.             </div>
  26.         );
  27.     }
  28. }

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

  1. import { ConfigProvider, DatePicker } from '@alifd/next';
  2. import enUS from '@alifd/next/lib/locale/en-us';
  3. // import zhCN from '@alifd/next/lib/locale/zh-cn';
  4. // import zhTW from '@alifd/next/lib/locale/zh-tw';
  5. // import jaJP from '@alifd/next/lib/locale/ja-jp';
  7. // 如果应用中直接引入的是 cdn 上的 next-with-locales.js 文件
  8. // 需要按照下面的方式引入国际化文案文件
  9. // const { ConfigProvider, DatePicker, locales } = window.Next;
  10. // const enUS = locales['en-us'];
  13. class App extends React.Component {
  14.     render() {
  15.         return (
  16.             <ConfigProvider locale={enUS}>
  17.                 <DatePicker />
  18.             </ConfigProvider>
  19.         );
  20.     }
  21. }

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

  1. {
  2.     DatePicker: {
  3.         datePlaceholder: 'Select date',
  4.         monthPlaceholder: 'Select month',
  5.         yearPlaceholder: 'Select year',
  6.         rangeStartPlaceholder: 'Start date',
  7.         rangeEndPlaceholder: 'End date',
  8.         ok: 'OK',
  9.         clear: 'Clear'
  10.     },
  11.     Dialog: {
  12.         // ...
  13.     },
  14.     // ...
  15. }

修改组件类名前缀

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

entry.jsx

  1. class App extends React.Component {
  2.     render() {
  3.         return (
  4.             <ConfigProvider prefix="my-">
  5.                 <div>
  6.                     <Input />
  7.                     <Button>Submit</Button>
  8.                 </div>
  9.             </ConfigProvider>
  10.         );
  11.     }
  12. }
  • scss 入口文件中在引入主题 scss 文件前，设置相应的 $css-prefix

entry.scss

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

开启 Pure Render

  1. import { ConfigProvider, DatePicker } from '@alifd/next';
  3. class App extends React.Component {
  4.     render() {
  5.         return (
  6.             <ConfigProvider pure>
  7.                 <DatePicker />
  8.             </ConfigProvider>
  9.         );
  10.     }
  11. }

如何让组件支持 ConfigProvider ？

  1. import { ConfigProvider } from '@alifd/next';
  2. import locale from './locale';
  4. const { config } = ConfigProvider;
  6. class Component extends React.Component {
  7.     static propTypes = {
  8.         prefix: PropTypes.string,
  9.         locale: PropTypes.object,
  10.         pure: PropTypes.bool
  11.     };
  13.     static defaultProps = {
  14.         prefix: 'next-',
  15.         locale: locale,
  16.         pure: false
  17.     };
  19.     render() {
  20.         const { prefix, locale, pure } = this.props;
  21.         // ...
  22.     }
  23. }
  25. export default config(Component);

API

ConfigProvider

参数说明类型默认值
errorBoundary是否开启错误捕捉 errorBoundary如需自定义参数，请传入对象 对象接受参数列表如下：fallbackUI Function(error?: {}, errorInfo?: {}) => Element 捕获错误后的展示afterCatch Function(error?: {}, errorInfo?: {}) 捕获错误后的行为, 比如埋点上传Boolean/Objectfalse
pure是否开启 Pure Render 模式，会提高性能，但是也会带来副作用Boolean-
warning是否在开发模式下显示组件属性被废弃的 warning 提示Booleantrue
rtl是否开启 rtl 模式Boolean-
children组件树ReactElement-
<!— api-extra-start —>

ConfigProvider.config(Component)

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

  1. Component.prototype.shouldComponentUpdate = function shouldComponentUpdate(nextProps, nextState) {
  2.     if (this.props.pure) {
  3.         return !shallowEqual(this.props, nextProps) || !shallowEqual(this.state, nextState);
  4.     }
  6.     return true;
  7. };

ConfigProvider.getContextProps(props, displayName)

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

ConfigProvider.getContext()

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

  1. {
  2.     prefix: nextPrefix,
  3.     locale: nextLocale,
  4.     pure: nextPure,
  5.     warning: nextWarning
  6. }

ConfigProvider.initLocales(locales)

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

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

ConfigProvider.setLanguage(language)

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

  1. ConfigProvider.setLanguage('zh-cn');

ConfigProvider.setLocale(locale)

直接设置语言包

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

ConfigProvider.setDirection(dir)

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

  1. ConfigProvider.setDirection('rtl');

ConfigProvider.getLocale()

获取当前的语言包

ConfigProvider.getLanguage()

获取当前设定的语言

ConfigProvider.getDirection()

获取当前设定的方向<!— api-extra-end —>

使用注意

减小应用中 webpack 打包 moment 体积

Next 1.x 中将 moment 作为自己的 peerDependencies 而非 dependencies，所以用户需要自己在应用中引入 moment 的 cdn 文件 moment-with-locales.js 或者本地安装 moment 打包进自己的应用。对于后者，由于 moment 在引入 locale 文件时存在这样的代码：require('./locale/' + name)，如果用 webpack 构建，会打包进所有的 locale 文件，增加构建后文件的体积，目前社区比较主流的解决方案有以下两种：

  1. const webpack = require('webpack');
  3. module.exports = {
  4.     // ...
  5.     plugins: [
  6.     // 打包指定需要的语言文件
  7.         new webpack.ContextReplacementPlugin(/moment[\/\\]locale$/, /zh-cn|ja/)
  8.     // 只打包有过引用的语言文件，应用中需要添加如：`import 'moment/locale/zh-cn';`
  9.     // new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
  10.     ]
  11. };

为自定义组件添加 displayName

ConfigProvider 获取组件对应的多语言文案，是通过组件的 displayName 或者 name 获取的，但是压缩混淆的过程中有可能会修改函数的 name，因此如果想支持在 ConfigProvider 下实现切换多语言切换，请为组件如下手动添加 displayName:

  1. class CustomComponent extends React.Component {
  2.     static displayName = 'CustomComponent';
  3.     // ...
  4. }

或者使用 babel-plugin-transform-react-es6-displayname 自动在编译期间添加 displayname。

获取 HOC 组件内部组件的引用

由于 HOC 本身的限制，我们不能直接像下面代码那样获取内部组件的引用，从而调用它的一些内部方法：

  1. class App extends React.Component {
  2.     componentDidMount() {
  3.         // 报错
  4.         this.refs.hoc.someMethod();
  5.     }
  7.     render() {
  8.         return <HOC ref="hoc" />;
  9.     }
  10. }

为了解决这个问题，我们为调用 config 方法生成的 HOC 组件添加了 getInstance 方法，你可以如下调用：

  1. class App extends React.Component {
  2.     componentDidMount() {
  3.         this.refs.hoc.getInstance().someMethod();
  4.     }
  6.     render() {
  7.         return <HOC ref="hoc" />;
  8.     }
  9. }

代码示例

国际化

展示如何配合 ConfigProvider 实现具有国际化能力的组件。

ConfigProvider 全局配置 Next 组件 - 图1

查看源码在线预览

  1. import { ConfigProvider, Button, Select } from '@alifd/next';
  2. import PropTypes from 'prop-types';
  4. const { config, getContextProps } = ConfigProvider;
  5. const { Option } = Select;
  7. const locales = {
  8.     'zh-cn': {
  9.         ClickMe: {
  10.             clickMe: '点我！'
  11.         },
  12.         Toast: {
  13.             close: '关闭'
  14.         }
  15.     },
  16.     'en-us': {
  17.         ClickMe: {
  18.             clickMe: 'click me!'
  19.         },
  20.         Toast: {
  21.             close: 'close'
  22.         }
  23.     }
  24. };
  26. class ClickMe extends React.Component {
  27.     static propTypes = {
  28.         locale: PropTypes.object,
  29.         onClick: PropTypes.func
  30.     };
  32.     static defaultProps = {
  33.         locale: locales['zh-cn'].ClickMe,
  34.         onClick: () => {}
  35.     };
  37.     render() {
  38.         const { locale, onClick } = this.props;
  39.         return (
  40.             <Button onClick={onClick}>{locale.clickMe}</Button>
  41.         );
  42.     }
  43. }
  45. class Toast extends React.Component {
  46.     static propTypes = {
  47.         locale: PropTypes.object,
  48.         afterClose: PropTypes.func
  49.     };
  51.     static defaultProps = {
  52.         locale: locales['zh-cn'].Toast,
  53.         afterClose: () => {}
  54.     };
  56.     constructor(props) {
  57.         super(props);
  59.         this.state = {
  60.             visible: false
  61.         };
  63.         this.handleClose = this.handleClose.bind(this);
  64.     }
  66.     handleClose() {
  67.         this.setState({
  68.             visible: false
  69.         });
  70.         this.props.afterClose();
  71.     }
  73.     render() {
  74.         return (
  75.             <div className="toast">
  76.                 <Button type="primary" onClick={this.handleClose}>
  77.                     {this.props.locale.close}
  78.                 </Button>
  79.             </div>
  80.         );
  81.     }
  82. }
  83. Toast.create = (props = {}) => {
  84.     const mountNode = document.createElement('div');
  85.     document.body.appendChild(mountNode);
  87.     const closeChain = () => {
  88.         ReactDOM.unmountComponentAtNode(mountNode);
  89.         document.body.removeChild(mountNode);
  90.     };
  92.     const newLocale = getContextProps(props, 'Toast').locale;
  94.     ReactDOM.render(<Toast afterClose={closeChain} locale={newLocale} />, mountNode);
  95. };
  97. const NewClickMe = config(ClickMe);
  98. const NewToast = config(Toast);
  100. class Demo extends React.Component {
  101.     constructor(props) {
  102.         super(props);
  104.         this.state = {
  105.             language: 'zh-cn'
  106.         };
  108.         this.handleClick = this.handleClick.bind(this);
  109.         this.handleChangeLanguage = this.handleChangeLanguage.bind(this);
  110.     }
  112.     handleClick() {
  113.         NewToast.create();
  114.     }
  116.     handleChangeLanguage(language) {
  117.         this.setState({
  118.             language
  119.         });
  120.     }
  122.     render() {
  123.         const { language } = this.state;
  125.         return (
  126.             <ConfigProvider locale={locales[language]}>
  127.                 <div>
  128.                     <div className="select-language">
  129.                         <Select value={language} onChange={this.handleChangeLanguage}>
  130.                             <Option value="zh-cn">zh-cn</Option>
  131.                             <Option value="en-us">en-us</Option>
  132.                         </Select>
  133.                     </div>
  134.                     <NewClickMe onClick={this.handleClick} />
  135.                 </div>
  136.             </ConfigProvider>
  137.         );
  138.     }
  139. }
  141. ReactDOM.render(<Demo />, mountNode);
  1. .toast {
  2.     position: fixed;
  3.     top: 0;
  4.     right: 0;
  5.     bottom: 0;
  6.     left: 0;
  7.     margin: auto;
  8.     width: 200px;
  9.     height: 100px;
  10.     line-height: 100px;
  11.     text-align: center;
  12.     background: white;
  13.     box-shadow: 3px 3px 5px 0 rgba(0, 0, 0, .32);
  14. }
  16. .toast .next-btn {
  17.     margin: auto;
  18. }
  20. .select-language {
  21.     margin-bottom: 20px;
  22. }

基本

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

ConfigProvider 全局配置 Next 组件 - 图2

查看源码在线预览

  1. import { ConfigProvider } from '@alifd/next';
  2. import PropTypes from 'prop-types';
  4. const { config } = ConfigProvider;
  6. class Output extends React.Component {
  7.     static propTypes = {
  8.         prefix: PropTypes.string,
  9.         locale: PropTypes.object,
  10.         pure: PropTypes.bool
  11.     };
  13.     static defaultProps = {
  14.         prefix: 'next-',
  15.         locale: {
  16.             hello: '你好'
  17.         },
  18.         pure: false
  19.     };
  21.     render() {
  22.         const { prefix, locale, pure } = this.props;
  24.         return (
  25.             <ul>
  26.                 <li>prefix: {prefix}</li>
  27.                 <li>locale: {JSON.stringify(locale)}</li>
  28.                 <li>pure: {pure.toString()}</li>
  29.             </ul>
  30.         );
  31.     }
  32. }
  34. const NewOutput = config(Output);
  36. class Demo extends React.Component {
  37.     render() {
  38.         return (
  39.             <ConfigProvider prefix="custom-" locale={{ Output: { hello: 'hello' } }} pure>
  40.                 <NewOutput />
  41.             </ConfigProvider>
  42.         );
  43.     }
  44. }
  46. ReactDOM.render(<Demo />, mountNode);

支持国际化的组件

展示目前 Next 组件中支持国际化的组件。

ConfigProvider 全局配置 Next 组件 - 图3

查看源码在线预览

  1. import { ConfigProvider, Button, Radio, Calendar, Card, DatePicker, Dialog, Pagination, TimePicker, Timeline, Transfer, Select, Upload, Table } from '@alifd/next';
  3. import enUS from '@alifd/next/lib/locale/en-us';
  4. import zhCN from '@alifd/next/lib/locale/zh-cn';
  6. // If the application directly imports the next-with-locales.js file from cdn
  7. // it need to import locale file in the following way
  8. // import { locales } from '@alifd/next';
  9. // const enUS = locales['en-us'];
  10. // const zhCN = locales['zh-cn'];
  12. const RangePicker = DatePicker.RangePicker;
  14. const transferDataSource = (() => {
  15.     const dataSource = [];
  17.     for (let i = 0; i < 10; i++) {
  18.         dataSource.push({
  19.             label: `content ${i}`,
  20.             value: `${i}`,
  21.             disabled: i % 4 === 0
  22.         });
  23.     }
  25.     return dataSource;
  26. })();
  28. class Demo extends React.Component {
  29.     constructor(props) {
  30.         super(props);
  32.         this.state = {
  33.             lang: 'en-us'
  34.         };
  36.         this.changeLang = this.changeLang.bind(this);
  37.         this.showDialog = this.showDialog.bind(this);
  38.     }
  40.     changeLang(lang) {
  41.         this.setState({
  42.             lang
  43.         });
  44.     }
  46.     showDialog() {
  47.         Dialog.confirm({
  48.             title: 'Confirm',
  49.             content: 'Are you sure you want to delete all alert e-mails waiting in queue?'
  50.         });
  51.     }
  53.     render() {
  54.         const locale = this.state.lang === 'en-us' ? enUS : zhCN;
  56.         return (
  57.             <div>
  58.                 <div className="change-locale">
  59.                     <span style={{ marginRight: 16 }}>Change locale of components: </span>
  60.                     <Radio.Group shape="button" size="large" defaultValue="en-us" onChange={this.changeLang}>
  61.                         <Radio key="en" value="en-us">English</Radio>
  62.                         <Radio key="cn" value="zh-cn">中文</Radio>
  63.                     </Radio.Group>
  64.                 </div>
  65.                 <ConfigProvider locale={locale}>
  66.                     <div className="locale-components">
  67.                         <Button type="primary" onClick={this.showDialog}>Show Dialog</Button>
  68.                         <Select style={{ width: '150px' }} dataSource={['hello', 'bye']} />
  69.                         <DatePicker />
  70.                         <TimePicker />
  71.                         <RangePicker />
  72.                         <Calendar style={{ width: '350px', padding: '12px', border: '1px solid #C4C6CF', borderRadius: '3px' }} shape="card" />
  73.                         <Pagination defaultCurrent={2} />
  74.                         <Transfer dataSource={transferDataSource} defaultValue={['3']} defaultLeftChecked={['1']} titles={['Source', 'Target']} />
  75.                         <Table style={{ width: '500px' }} dataSource={[]}>
  76.                             <Table.Column title="Name" dataIndex="name" filters={[{ label: 'Filter 1', value: '1' }, { label: 'Filter 2', value: '2' }]} />
  77.                             <Table.Column title="Age" dataIndex="age" />
  78.                         </Table>
  79.                         <Card style={{ width: '300px' }} title="Title">
  80.                             <div style={{ height: '250px', background: '#F7F8FA' }}></div>
  81.                         </Card>
  82.                         <Timeline fold={[{foldArea: [1, 2], foldShow: true}]}>
  83.                             <Timeline.Item title="Signed" content="Signed, sign Alibaba is a small post office, thanks to the use of STO, look forward to once again at your service" time={'2016-06-10 10:30:00'} state="process"/>
  84.                             <Timeline.Item title="Ship" content="Express has arrived in Hangzhou, Zhejiang Binjiang company" time={'2016-06-10 09:30:00'} />
  85.                             <Timeline.Item title="Ship" content="Zhejiang Hangzhou Riverside company sent a member for you to send pieces" time={'2016-06-10 09:03:00'} />
  86.                             <Timeline.Item title="Ship" content="Zhejiang Hangzhou Transshipment Center has been issued" time={'2016-06-10 06:10:00'} />
  87.                         </Timeline>
  88.                         <Upload.Dragger style={{ width: '500px' }}
  89.                             listType="image"
  90.                             action="https://www.easy-mock.com/mock/5b713974309d0d7d107a74a3/alifd/upload"
  91.                             accept="image/png, image/jpg, image/jpeg, image/gif, image/bmp" />
  92.                     </div>
  93.                 </ConfigProvider>
  94.             </div>
  95.         );
  96.     }
  97. }
  99. ReactDOM.render(<Demo />, mountNode);
  1. .change-locale {
  2.     border-bottom: 1px solid #d9d9d9;
  3.     padding-bottom: 16px;
  4. }
  6. .locale-components > * {
  7.     margin: 16px 0;
  8.     display: block;
  9. }

使用 Consumer 组件读取上下文中的数据

使用 <Consumer> 可以方便地读取 <ConfigProvider> 中上下文的数据

ConfigProvider 全局配置 Next 组件 - 图4

查看源码在线预览

  1. import { ConfigProvider } from '@alifd/next';
  2. import PropTypes from 'prop-types';
  4. const localeSettings = {
  5.     momentLocale: 'fr-FR',
  6.     CustomizedComponent: {
  7.         helloWorld: 'hello, world'
  8.     }
  9. };
  11. const App = ({ children }) => (
  12.     <ConfigProvider
  13.         prefix="customized-"
  14.         locale={localeSettings}
  15.         pure
  16.         warning={false}
  17.     >
  18.         {children}
  19.     </ConfigProvider>
  20. );
  22. App.propTypes = {
  23.     children: PropTypes.node
  24. };
  26. const Child = () => (
  27.     <ConfigProvider.Consumer>
  28.         {
  29.             context => (
  30.                 <div className="context-data">
  31.                     <h3>Context's state</h3>
  32.                     <pre>{JSON.stringify(context, false, 2)}</pre>
  33.                 </div>
  34.             )
  35.         }
  36.     </ConfigProvider.Consumer>
  37. );
  39. const Demo = () => (
  40.     <App>
  41.         <Child />
  42.     </App>
  43. );
  45. ReactDOM.render(<Demo />, mountNode);
  1. .context-data {
  2.     padding: 0 32px 32px;
  3.     border: 3px dashed #aaa;
  4.     border-radius: 9px;
  5. }

组件的RTL

组件RTL样式展示(目前部分支持)

ConfigProvider 全局配置 Next 组件 - 图5

查看源码在线预览

  1. import { ConfigProvider, Button, Radio, Menu, Calendar, DatePicker, Dialog, TimePicker, Timeline, Select } from '@alifd/next';
  3. const { SubMenu, Item, Group, Divider } = Menu;
  4. const RangePicker = DatePicker.RangePicker;
  6. // Set global direction to 'rtl'. This affects the whole page
  7. // ConfigProvider.setDirection('rtl');
  9. class Demo extends React.Component {
  10.     constructor(props) {
  11.         super(props);
  13.         this.state = {
  14.             dir: 'rtl'
  15.         };
  17.         this.changeDir = this.changeDir.bind(this);
  18.         this.showDialog = this.showDialog.bind(this);
  19.     }
  21.     changeDir(value) {
  22.         this.setState({
  23.             dir: value
  24.         });
  25.     }
  27.     showDialog() {
  28.         Dialog.confirm({
  29.             title: 'Confirm',
  30.             content: 'Are you sure you want to delete all alert e-mails waiting in queue?'
  31.         });
  32.     }
  34.     render() {
  36.         return (
  37.             <div>
  38.                 <div className="change-rtl">
  39.                     <span style={{ marginRight: 16 }}>Change direction of components: </span>
  40.                     <Radio.Group shape="button" size="large" value={this.state.dir} onChange={this.changeDir}>
  41.                         <Radio key="rtl" value="rtl">RTL</Radio>
  42.                         <Radio key="ltr" value="ltr">LTR</Radio>
  43.                     </Radio.Group>
  44.                 </div>
  45.                 <br />
  46.                 <hr />
  47.                 <ConfigProvider rtl={this.state.dir === 'rtl'}>
  48.                     <div className="locale-components" dir={this.state.dir}>
  49.                         <Button type="primary" onClick={this.showDialog}>Show Dialog</Button>
  50.                         <Select style={{ width: '150px' }} dataSource={['hello', 'bye']} />
  51.                         <RangePicker showTime/>
  52.                         <Calendar style={{ width: '350px', padding: '12px', border: '1px solid #C4C6CF', borderRadius: '3px' }} shape="card" />
  54.                         <Timeline fold={[{foldArea: [1, 2], foldShow: true}]}>
  55.                             <Timeline.Item title="Signed" content="Signed, sign Alibaba is a small post office, thanks to the use of STO, look forward to once again at your service" time={'2016-06-10 10:30:00'} state="process"/>
  56.                             <Timeline.Item title="Ship" content="Express has arrived in Hangzhou, Zhejiang Binjiang company" time={'2016-06-10 09:30:00'} />
  57.                             <Timeline.Item title="Ship" content="Zhejiang Hangzhou Riverside company sent a member for you to send pieces" time={'2016-06-10 09:03:00'} />
  58.                             <Timeline.Item title="Ship" content="Zhejiang Hangzhou Transshipment Center has been issued" time={'2016-06-10 06:10:00'} />
  59.                         </Timeline>
  61.                         <Menu className="my-menu" defaultOpenKeys="sub-menu">
  62.                             <Item key="1">Option 1</Item>
  63.                             <Item disabled key="2">Disabled option 2</Item>
  64.                             <Divider key="divider" />
  65.                             <Group label="Group">
  66.                                 <Item key="group-1">Group option 1</Item>
  67.                                 <Item key="group-2">Group option 2</Item>
  68.                             </Group>
  69.                             <Divider />
  70.                             <SubMenu key="sub-menu" label="Sub menu">
  71.                                 <Item key="sub-1">Sub option 1</Item>
  72.                                 <Item key="sub-2">Sub option 2</Item>
  73.                                 <Item disabled key="sub-3">
  74.                                     <a href="https://www.taobao.com/" target="__blank">Disabled Option Link 3</a>
  75.                                 </Item>
  76.                                 <Item key="sub-4">
  77.                                     <a href="https://www.taobao.com/" target="__blank">Option Link 4</a>
  78.                                 </Item>
  79.                             </SubMenu>
  80.                             <Item key="3" helper="CTRL+P">Option 3</Item>
  81.                             <Item disabled key="4">
  82.                                 <a href="https://www.taobao.com/" target="__blank">Disabled Option Link</a>
  83.                             </Item>
  84.                             <Item key="5">
  85.                                 <a href="https://www.taobao.com/" target="__blank">Option Link</a>
  86.                             </Item>
  87.                         </Menu>
  88.                     </div>
  89.                 </ConfigProvider>
  90.             </div>
  91.         );
  92.     }
  93. }
  95. ReactDOM.render(<Demo />, mountNode);
  1. .my-menu {
  2.     width: 200px;
  3. }
  5. .change-locale {
  6.     border-bottom: 1px solid #d9d9d9;
  7.     padding-bottom: 16px;
  8. }
  10. .locale-components > * {
  11.     margin: 16px 0;
  12.     display: block;
  13. }

ErrorBoundary 捕获错误

使用 <ErrorBoundary> 可以避免由于局部区域的错误，所引起的页面白屏。

ConfigProvider 全局配置 Next 组件 - 图6

查看源码在线预览

  1. import { ConfigProvider, Button } from '@alifd/next';
  3. const { ErrorBoundary, config } = ConfigProvider;
  5. class Demo extends React.Component {
  6.     render() {
  7.         if (this.props.throwError) {
  8.             throw Error('There is something going wrong!');
  9.         } else {
  10.             return (
  11.                 <span>normal</span>
  12.             );
  13.         }
  14.     }
  15. }
  17. const NewDemo = config(Demo);
  19. const fallbackUI = (props) => {
  20.     const { error, errorInfo } = props;
  21.     return <span style={{color: 'red'}}>{error.toString()}</span>;
  22. };
  24. class App extends React.Component {
  25.     state = {
  26.         throwError: false
  27.     };
  29.     onClick = () => {
  30.         this.setState({
  31.             throwError: true
  32.         });
  33.     };
  35.     render() {
  36.         return (<div>
  37.             Click to throw an error <Button type="primary" onClick={this.onClick}>trigger error</Button>
  38.             <br/>
  39.             <br/>
  40.             Default fallback UI:
  41.             <hr />
  42.             <ConfigProvider errorBoundary>
  43.                 <NewDemo throwError={this.state.throwError}/>
  44.             </ConfigProvider>
  45.             <br/>
  46.             <br/>
  47.             Customize fallback UI of configed Component(Basic Components / Biz Components):
  48.             <hr />
  49.             <ConfigProvider errorBoundary={{
  50.                 fallbackUI: props => {
  51.                     const { error, errorInfo } = props;
  52.                     return <span style={{color: 'red'}}>Error: {error.toString()}</span>;
  53.                 },
  54.                 afterCatch: () => {
  55.                     console.log('catching');
  56.                 }
  57.             }}>
  58.                 <NewDemo throwError={this.state.throwError}/>
  59.             </ConfigProvider>
  60.         </div>);
  61.     }
  62. }
  64. ReactDOM.render(<App />, mountNode);

相关区块

ConfigProvider 全局配置 Next 组件 - 图7

暂无相关区块