众所周知，我们项目在使用antd-ui组件库的时候，常常都是npm install antd 然后将整个库引用进来。但大家有想过如何在项目中单独引入某一个组件么？或者说这种场景下大家会如何处理呢？

出现单独引用的情况有哪些？

首先，来说一下我遇到的背景。随着antd组件库升级到4.0以上，大部分组件在样式和功能上都有调整。其中较为明显的是tabs组件,它将左右按钮改成了三个点，然后用户可以直接点击三个点来展示被收起的tab全部列表。进而点击进行切换。但不知道哪家用户竟然说这样不好用，还要使用老的。这简直就是离谱。其次，社区有人提到的，他们一些项目使用antd3.0版本由于依赖太重，没法直接升级到最新版本。但随着4.0愈加完善。3.0不再维护，以及一些api出现兼容问题。有的组件不得不单独升级到4.0。（虽然个人观点，建议这部分人直接排期，统一替换成最新版本）

上述场景的解决方案

当出现以上两种，法一：通常解决办法是自己写一个替代组件，进而解决组件库问题。这样做的好处是我们可以任意扩展组件，不足就是成本和风险也会加大。首先我们写组件的时间要长，而且质量不一定有组件库的好。其次，组件库无论兼容还是缺陷、不足，基本上都可控，不会出现较大问题。因为这么多使用者都已经验证过它的合理性了。法二：第二种就是单独引用所需要的组件。这里经过今天调研，尚未发现有完整解决方案。还望大神指点迷津。法三：同时安装两个版本antd，然后将需要替换的组件单独引用，或者用一个高级组件包一下返回。

实战

由于每个组件的不同，以及时间问题，法一就不展示了。法二本人尚未找到可行方案，望知道的一定不令指教。\
法三步骤如下：

终端> npm install antd-version3@npm:antd@next

jsx代码如下：

// myButton.jsx Button可以是任意你要替换的组件，这里只是样例
import { Button } from 'antd-version4'

export default myButton = (props) => {
    return <div>
        <Button {...props}></Button>
    </div>
}

// use place
import myButton from './myButton';

export default demo = () => {
    return <div>
        <myButton></myButton>
        '使用button的地方用自己导出的即可'
    </div>
}