如何在 ant-design react app 中使用 ant-design-pro 组件?

How to use ant-design-pro components in ant-design react app?

我用create-react-app创建了react app,使用了ant-design组件,随着项目越来越大,我需要使用ant-design-pro的一些很棒的组件。

有没有办法在现有的ant-design项目中集成ant-design-pro的组件?

我尝试导入并使用@ant-design/pro-layout,但对我不起作用。

欢迎来到 Stack Overflow!

似乎 ant-design 团队选择将 ant-design-pro 组件直接集成到 antd 中。 ant-design-pro 的版本 2.3.0 是您可以用作组件库的库的最新版本。 (来源:他们的changelog)。

您可能仍然可以安装该版本(here's the documentation)。

他们最近发布了 ant-design-pro 的 v4,我不完全确定你是否可以安装组件 stand-alone。

但是,ant-design-pro 中的许多组件现在直接在 ant design 中维护,如您所见 here:

In the next version of Pro, we will gradually remove all the components that will be added to the Ant Design, which are under development:

...

These components will be more fully supported and maintained in Ant Design, and Pro will focus on Layout and scaffolding.

对于 V4,如果您使用 @ant-design/pro-layout,请参考 Upgrade to V4, check Replace BasicLayout

对于单个组件,使用 npm install ant-design-pro@2.3.2 并根据需要导入组件:

import Ellipsis from 'ant-design-pro/lib/Ellipsis';

演示: