#私藏项目实操分享# 【练习案例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

相关文章
|
7月前
|
前端开发 JavaScript 测试技术
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
从零开始搭建react+typescript+antd+redux+less+vw自适应项目
187 0
|
7月前
|
前端开发 API 数据安全/隐私保护
【第45期】一文解决React项目的权限管理
【第45期】一文解决React项目的权限管理
349 0
|
7月前
|
Web App开发 资源调度 JavaScript
竟然可以在一个项目中混用 Vue 和 React?
竟然可以在一个项目中混用 Vue 和 React?
703 0
|
4月前
|
存储 前端开发 JavaScript
最适合新手学习的react案例-Todolist尊享版!
【8月更文挑战第13天】最适合新手学习的react案例-Todolist尊享版!
61 2
最适合新手学习的react案例-Todolist尊享版!
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库实战案例
这篇文章介绍了在React应用中使用Axios和Fetch库进行Ajax请求的实战案例,展示了如何通过这些库发送GET和POST请求,并处理响应和错误。
61 10
React技术栈-react使用的Ajax请求库实战案例
|
3月前
|
前端开发
React技术栈-react使用的Ajax请求库用户搜索案例
这篇文章展示了一个React技术栈中使用Ajax请求库(如axios)进行用户搜索的实战案例,包括React组件的结构、状态管理以及如何通过Ajax请求获取并展示GitHub用户数据。
36 7
React技术栈-react使用的Ajax请求库用户搜索案例
|
3月前
|
前端开发 NoSQL MongoDB
React技术栈-基于react脚手架编写评论管理案例
这篇文章介绍了在MongoDB中使用sort和投影来对查询结果进行排序和限制返回的字段,通过具体的命令示例展示了如何实现这些操作。
53 6
React技术栈-基于react脚手架编写评论管理案例
|
3月前
|
资源调度 JavaScript 前端开发
使用vite+react+ts+Ant Design开发后台管理项目(二)
使用vite+react+ts+Ant Design开发后台管理项目(二)
|
3月前
|
前端开发 JavaScript
React技术栈-react的脚手架创建应用案例
本文介绍了如何使用React的官方脚手架工具create-react-app快速创建React项目,并展示了项目的目录结构和基本的代码文件,以及如何启动和运行React应用。
36 2
|
4月前
|
Web App开发 前端开发 JavaScript
React——前端开发中模块与组件【四】
React——前端开发中模块与组件【四】
40 0