关键词：
【中文标题】如何在 ant-design react app 中使用 ant-design-pro 组件？【英文标题】：How to use ant-design-pro components in ant-design react app? 【发布时间】：2019-10-22 14:52:52 【问题描述】：我已经使用 create-react-app 创建了 react 应用程序并使用了 ant-design 组件，随着项目变得越来越大，我需要使用 ant-design-pro 的一些很棒的组件。
有没有办法将 ant-design-pro 组件集成到现有的 ant-design 项目中？
我尝试导入和使用@ant-design/pro-layout，但对我不起作用。
【问题讨论】：
【参考方案1】：V4 参考Upgrade to V4，如果你使用@ant-design/pro-layout，请检查Replace BasicLayout。
对于单个组件，请使用 npm install ant-design-pro@2.3.2 并根据需要导入组件：
import Ellipsis from 'ant-design-pro/lib/Ellipsis';
演示：
【讨论】：
谢谢你的回复，这就是我想要的 导入antd pro组件需要less-loader吗？ 我收到此错误 ``` ./node_modules/antd/es/typography/style/index.less 1:0 模块解析失败：意外字符 '@' (1:0) 您可能需要一个合适的加载器来处理这个文件类型。 > @import '../../style/themes/index'; | @import '../../style/mixins/index'; | ```【参考方案2】：欢迎来到 Stack Overflow！
看来ant-design团队选择将ant-design-pro组件直接集成到antd中。
ant-design-pro 的版本 2.3.0 是可以用作组件库的库的最新版本。 （来源：他们的changelog）。
您可能仍然可以安装该版本（here's the documentation 这样做）。
他们最近发布了ant-design-pro 的v4，我不完全确定您是否可以独立安装这些组件。
不过，ant-design-pro 中的很多组件现在都直接在ant design 内部维护，如您所见here：
在下一个 Pro 版本中，我们将逐步移除所有将添加到 Ant Design 中的组件，这些组件正在开发中：
...
这些组件将在 Ant Design 中得到更全面的支持和维护，Pro 将专注于布局和脚手架。
【讨论】：
感谢您的回复。很有帮助。 我可以在没有less-loader的情况下使用ant design pro组件吗react使用ant-design组件库
新建项目并引入组件1，全局安装脚手架npminstall-gcreate-react-app2，新建项目create-react-appreactantd3，安装组件npminstallantd--save4，引入组件在需要使用组件的页面进行引入并使用importButtonfrom‘antd/lib/button‘import‘antd/dist/antd.css‘<Butto... 查看详情
用ant-design在react js中提交后清除表单输入字段值
】用ant-design在reactjs中提交后清除表单输入字段值【英文标题】：Clearforminputfieldvaluesaftersubmittinginreactjswithant-design【发布时间】：2019-05-2323:24:13【问题描述】：我使用react创建了一个注册页面。在那里，我使用了以下注册表单。ht... 查看详情
react&ant-design应用——datepicker日期选择框及特定日期禁用moment.js(代码片段)
React&Ant-Design应用——DatePicker日期选择框及特定日期禁用开发需求①在项目中导入Ant-DesignDatePickerMonment.JS心得总结好久没写React。重新接触React后，今天实习实践做的第一个功能应用是：利用React和Ant-Design中的DatePicker&#x... 查看详情
react&ant-design应用——datepicker日期选择框及特定日期禁用moment.js(代码片段)
React&Ant-Design应用——DatePicker日期选择框及特定日期禁用开发需求①在项目中导入Ant-DesignDatePickerMonment.JS心得总结好久没写React。重新接触React后，今天实习实践做的第一个功能应用是：利用React和Ant-Design中的DatePicker&#x... 查看详情
解决react+ant-design中select下拉框分离随页面滚动问题(代码片段)
这个归根结底大概是ant-design中Select组件没有找到正确的父节点。很多方法试了并没有成功，最后用下面的方法解决了这个bug。解决办法：1、在Select组件标签内添加getPopupContainer属性：getPopupContainer=triggerNode=>(t... 查看详情
Ant-Design CSS 未正确加载
】Ant-DesignCSS未正确加载【英文标题】：Ant-DesignCSSnotloadingproperly【发布时间】：2019-07-1104:24:24【问题描述】：我在使用React.js在第一次渲染时渲染我的Ant-DesignCSS时遇到问题。我有一个非常基本的页面，它只是呈现一个按钮。importR... 查看详情
如何在 Svelte App 内渲染 React App 或在 React App 内渲染 Svelte App？
】如何在SvelteApp内渲染ReactApp或在ReactApp内渲染SvelteApp？【英文标题】：HowtoRenderingReactAppinsideSvelteApporRenderingSvelteAppinsideReactApp?【发布时间】：2019-12-0918:11:23【问题描述】：如何在React应用中使用svelte文件我尝试将SvelteComponent导入... 查看详情
解决react+ant-design中select下拉框分离随页面滚动问题(代码片段)
这个归根结底大概是ant-design中Select组件没有找到正确的父节点。很多方法试了并没有成功，最后用下面的方法解决了这个bug。解决办法：1、在Select组件标签内添加getPopupContainer属性：getPopupContainer=triggerNode=>(t... 查看详情
解决react+ant-design中select下拉框分离随页面滚动问题(代码片段)
这个归根结底大概是ant-design中Select组件没有找到正确的父节点。很多方法试了并没有成功，最后用下面的方法解决了这个bug。解决办法：1、在Select组件标签内添加getPopupContainer属性：getPopupContainer=triggerNode=>(t... 查看详情
create-react-app：如何在 React 渲染之前加载 html
】create-react-app：如何在React渲染之前加载html【英文标题】：create-react-app:howtoloadhtmlbeforeReactrenders【发布时间】：2019-08-1004:02:01【问题描述】：我正在尝试在React加载之前添加启动画面。因为我使用的是reactscripts/react-app，所以我... 查看详情
如何在 create-react-app 中注入没有 REACT_APP 前缀的 dotenv 变量？
】如何在create-react-app中注入没有REACT_APP前缀的dotenv变量？【英文标题】：HowtoinjectdotenvvariableswithoutREACT_APPprefixincreate-react-app?【发布时间】：2020-08-0705:46:33【问题描述】：我有一个项目要从旧版React应用迁移到标准create-react-app一... 查看详情
react&ant-design应用——自适应居中组件（grid栈格设置布局space间距设置）(代码片段)
React&Ant-Design应用——Grid栈格设置布局、Space间距设置自适应内容问题描述居中布局：Grid栈格Space设置间距总结今天在实践中，我第一次使用了Grid栈格来设置布局，也用了Space来设置合适的间距。通过Grid配合Space... 查看详情
react&ant-design应用——自适应居中组件（grid栈格设置布局space间距设置）(代码片段)
React&Ant-Design应用——Grid栈格设置布局、Space间距设置自适应内容问题描述居中布局：Grid栈格Space设置间距总结今天在实践中，我第一次使用了Grid栈格来设置布局，也用了Space来设置合适的间距。通过Grid配合Space... 查看详情
如何在 create-react-app 中创建导入快捷方式/别名？
】如何在create-react-app中创建导入快捷方式/别名？【英文标题】：Howtomakeanimportshortcut/aliasincreate-react-app?【发布时间】：2020-11-1323:08:58【问题描述】：如何在create-react-app中设置导入快捷方式/别名？从此：importLayoutfrom\'../../Component... 查看详情
如何在 Windows 7 中使用 create-react-app
】如何在Windows7中使用create-react-app【英文标题】：Howtousecreate-react-appwithWindows7【发布时间】：2022-01-1915:34:53【问题描述】：昨天尝试使用create-react-app启动一个新的react应用。不幸的是，当我使用命令npxcreate-react-appmy-app时，它显... 查看详情
如何在 create-react-app 中指定全局类型声明？
】如何在create-react-app中指定全局类型声明？【英文标题】：Howtospecifyglobaltypedeclarationsincreate-react-app?【发布时间】：2021-08-2319:16:00【问题描述】：我在我的create-react-app项目中设置全局类型时遇到问题。这是我的tsconfig.json文件。"... 查看详情
如何在 create-react-app 中激活 CORS？
】如何在create-react-app中激活CORS？【英文标题】：HowcanIactivateCORSincreate-react-app?【发布时间】：2019-06-1709:35:46【问题描述】：我已经使用create-react-appcli创建了一个React应用程序。现在我使用外部库做一些请求。（我将库传递给我... 查看详情
如何在 react-native webView 和 React web-app 之间进行通信？
】如何在react-nativewebView和Reactweb-app之间进行通信？【英文标题】：howtoCommunicatebetweenreact-nativewebViewandaReactweb-app?【发布时间】：2020-10-0713:57:58【问题描述】：我正在尝试在react-native中的webView和使用React-360（当然还有React）创建的... 查看详情