React中使用antDesign框架

1.在React项目中使用Ant Design,首先需要安装Ant Design:

npm install antd --save

2.按需引入Ant Design组件,以减小最终打包的大小。使用babel-plugin-import插件可以实现按需加载。首先安装插件:

npm install babel-plugin-import --save-dev

3.在.babelrc或babel配置中添加配置:

javascript 复制代码
{
  "plugins": [
    ["import", { "libraryName": "antd", "style": true }]
  ]
}

4.在React组件中这样使用Ant Design组件:

javascript 复制代码
import React from 'react'
import { Button } from 'antd'

const App = () => {
    <div>
        <Button type="primary">Click me</Button>
    </div>
}

export default App

5.引入整个Ant Design库及样式,如下,然后就可以在组件中直接使用Ant Design提供的所有组件了:

javascript 复制代码
import 'antd/dist/antd.css' // 引入antd样式
相关推荐
传人once16 小时前
页面中心圆圈放大效果如何写
开发语言·javascript·ecmascript
用户0333074139517 小时前
TypeScript using 与 AsyncDisposableStack:在真实服务端代码中协调多资源清理
前端
daisychey17 小时前
用 Playwright 做多平台内容分发,我踩过的 8 个坑
前端
IT_陈寒18 小时前
为什么你应该学习JavaScript?
前端·人工智能·后端
大龄秃头程序员18 小时前
iOS冷启动监控Demo
前端
光影少年18 小时前
为什么 JavaScript 中 0.1 + 0.2 !== 0.3,如何让其相等?
前端·javascript·算法
掘金酱19 小时前
[稀土掘金 × 火山引擎] AI用量周榜冲刺赛|获奖名单公示
前端·人工智能·后端
泡泡oO19 小时前
“如果你还在用Superpowers,那我不要和你说话”
前端·后端·全栈
维克兜率天19 小时前
趋势过滤:避免被“假突破“反复打脸
前端
8年区块链老兵20 小时前
一篇文章教会你:用区块高度读懂比特币链上的每一笔交易
前端