#私藏项目实操分享# 【练习案例React六】项目中开始引入ant模块

简介: #私藏项目实操分享# 【练习案例React六】项目中开始引入ant模块

前言

我是歌谣 我有个兄弟 巅峰的时候排名c站总榜19 叫前端小歌谣 曾经我花了三年的时间创作了他 现在我要用五年的时间超越他 今天又是接近兄弟的一天人生难免坎坷 大不了从头再来 歌谣的意志是永恒的 放弃很容易 但是坚持一定很酷

导语

目前当前的一个开源项目每天都有更新 现在要加入一个新的模块了 ant的 平时工作中用到也有ant design

解决思路

yarn add antd

注意在app.css的头部加上

@import '~antd/dist/antd.css'; 引入样式 不然是无法看到样式的

代码部分

<Upload
              // fileList={modifyData.imgVoucher}
                listType="picture-card"
                showUploadList={false}
                onChange={this.handleChange}
              >
                {imgVoucher ? <img src={imgVoucher}
 style={{ width: 100 }} /> : <a>上传凭证</a>}
              </Upload>

就引入了上传组件了

运行结果

image.png

相关文章
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
前端开发 JavaScript 安全
使用React、TypeScript和Ant Design构建现代化前端应用
使用React、TypeScript和Ant Design构建现代化前端应用
753 0
react使用ant desgin 组件实现便利开发
react使用ant desgin 组件实现便利开发
|
JavaScript 前端开发 开发工具
TypeScript 可以与其他流行的开发工具和框架结合使用,如 Angular 和 React 等。具体应用案例解析
TypeScript 可以与其他流行的开发工具和框架结合使用,如 Angular 和 React 等。具体应用案例解析
201 1
|
前端开发 JavaScript 容器
第二章 简单实现Hello React案例
第二章 简单实现Hello React案例
102 0
|
存储 前端开发
React & webpack &ant 学习
React & webpack &ant 学习
136 0
|
前端开发
从零开始学习React-引入Ant Design 组件(八)
从零开始学习React-引入Ant Design 组件(八)
295 0
|
3月前
|
缓存 前端开发 JavaScript
React Hooks深度解析与最佳实践:提升函数组件能力的终极指南
🌟蒋星熠Jaxonic,前端探索者。专注React Hooks深度实践,从原理到实战,分享状态管理、性能优化与自定义Hook精髓。助力开发者掌握函数组件的无限可能,共赴技术星辰大海!
React Hooks深度解析与最佳实践:提升函数组件能力的终极指南
|
8月前
|
缓存 前端开发 数据安全/隐私保护
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
如何使用组合组件和高阶组件实现复杂的 React 应用程序?
312 68
|
8月前
|
缓存 前端开发 Java
在 React 中,组合组件和高阶组件在性能方面有何区别?
在 React 中,组合组件和高阶组件在性能方面有何区别?
288 67