![](https://img-blog.csdnimg.cn/20190918140037908.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
React
文章平均质量分 67
react、antd
可达鸭头上站青蛙
至妙之要,先存后忘。
展开
-
使用vite创建一个react18项目
打包你的代码,并且它是预配置的,可输出用于生产环境的高度优化过的静态资源。模块提供了丰富的内建功能,如速度快到惊人的模块热更新(HMR)。安装 node_modules,完成后,输入指令。vite 是一种新型前端构建工具,能够显著提升前端。选择React项目模板,空格按钮确认。选择变种语言 TypeScript。一个开发服务器,它基于原生。一套构建指令,它使用。原创 2024-04-02 17:02:19 · 969 阅读 · 0 评论 -
React中使用动态创建的a标签href属性异步下载文件
需求:点击Table列表中的文件名称,触发click事件,然后dispatch调取后台接口,根据返回值来确定是否下载文件。这里面因为涉及到了后台api,所以是异步行为,这时候不能直接给a标签href属性赋值,因为点击a标签的时候会同时执行onClick方法和href属性,所以这里使用document.createElement(‘a’)动态生成a标签来实现异步下载文件的操作。1、Table中,在"文件名称"后面增加一个下载按钮来触发click事件:columns = [{ title: '文件名原创 2020-07-15 14:21:32 · 3629 阅读 · 0 评论 -
uncaught at _callee TypeError: Invalid attempt to spread non-iterable instance
报错内容如下:错误信息的意思是:未在_callee类型错误捕获:传播非迭代实例的尝试无效出现当前问题的原因:数据格式解析错误,可能在应该使用 {} 的时候使用了 [] ,在应该使用 [] 的时候使用了 {}。index.js:1 uncaught at _callee TypeError: Invalid attempt to spread non-iterable instance ...原创 2020-05-08 10:55:29 · 4575 阅读 · 0 评论 -
antd中使用Form控件和Upload控件对图片上传并进行验证
在antd中使用Form原创 2019-12-22 14:18:22 · 6904 阅读 · 0 评论 -
antd中如何给Table表格添加合计行
最近项目需求:在表格底部添加一行为金额的合计行,然后分页每页都显示。因为项目的UI框架使用的是Ant Design,找了一下Table的使用方法,发现居然没有合计数据这样一个功能,但是提供了一个footer属性用来做Table底部的空间显示。然后我使用footer中添加一个Table来做了一下合计行显示,勉强能做出来,但是需要修改Table的css样式,并且在不同分辨率下表格的线框无法对其,总之...原创 2019-12-04 09:49:42 · 20392 阅读 · 18 评论 -
react+antd中使用插件js-export-excel将table数据导出为excel文件
首先在项目中安装js-export-excel插件,进入项目目录,执行以下命令:npm安装:npm install --save js-export-excel,yarn安装:yarn add js-export-excel,安装好之后,查看package.json文件夹中会在dependencies(生产环境依赖)对象中显示插件版本信息://package.json"dependenc...原创 2019-11-18 15:01:54 · 6418 阅读 · 7 评论 -
使用antd中AutoComplete组件写一个模糊查询功能
先上效果图:index.jsx文件import React, { PureComponent } from 'react';import { connect } from 'dva';import { Form, AutoComplete } from 'antd';@Form.create()export default class AutoCompleteCom extends...原创 2019-11-01 15:23:36 · 5920 阅读 · 7 评论 -
Unhandled Rejection (TypeError): Super expression must either be null or a function
今天在写组件的时候报错了:有道了一下汉语意思:未处理的拒绝(类型错误):超表达式必须是null或函数然后查看了一下自己写的代码,发现原来是组件的首字母没有大写。import React, { pureComponent } from 'react';import { Card, Select } from 'antd';export default class CascaderOne...原创 2019-10-24 15:36:45 · 1060 阅读 · 0 评论 -
如何修改当前页面的antd组件的css样式
想要在当前页面修改ant-designUI组件的样式,需要在less样式文件中加上:global{},如下代码所示,在当前组件的less文件中定义了一个类名叫做coupon,然后其中加入:global{},在global中修改ant-design组件的样式。.coupon { //只在当前组件中使用的样式类名 :global { .antd-pro-components-descri...原创 2019-10-24 13:31:24 · 3881 阅读 · 0 评论 -
react-antd中使用umi的Link路由组件跳转页面时如何传参?
在使用Link组件跳转页面时有两种页面跳转,分别为:1、在当前标签页页面跳转2、跳转到新的标签页一、在当前标签页中路由跳转代码如下:const { voucherType,organizationId } = record;<Link to={{pathname:'/voucher/voucherSummary/voucherSummaryDetail', query:{vouc...原创 2019-10-22 21:10:25 · 6739 阅读 · 0 评论 -
antd中如何给form表单做数据的返显
在使用Ant-DesignUI库中的Form组件时,怎样在编辑页面时将之前保存过的数据返显在页面?思路:1、在componentDidMount生命周期中调用api获取后台数据;2、通过form的setFieldsValue()方法将后台数据绑定到Form表单控件中。注意:使用 getFieldsValue, getFieldValue, setFieldsValue 等时,应确保对应的...原创 2019-10-12 14:10:35 · 5788 阅读 · 0 评论 -
git提交时由于eslint的检测机制报错:npm run lint-staged:js found some errors
git提交时报了两条错误:1、stylelint --syntax less found some errors. Please fix them and try committing again2、npm run lint-staged:js found some errors. Please fix them and try committing again.husky > pre...原创 2019-09-19 09:47:23 · 24455 阅读 · 8 评论 -
TypeError: value.locale is not a function
时间戳(timestamp)是指格林威治时间1970年01月01日00时00分00秒(北京时间1970年01月01日08时00分00秒)起至现在的总秒数。原创 2019-09-05 15:27:15 · 8550 阅读 · 3 评论 -
antd中的所有post请求全部变成了get请求,求教是不是因为umi的路由配置文件过大?
项目启动时,编译出现以下问题,但是编译成功了进入页面之后看所有的请求全部从POST变为了GET,也看不到请求数据,请求地址request也是错的,请教有没有人知道原因?...原创 2019-08-13 10:16:08 · 949 阅读 · 0 评论 -
antd中如何给绑定Form的Radio.Group设置默认的选中值!
嗯~~本人2年前端小菜鸡,刚刚换了新公司,接手的项目使用的是react+antd+dva+umi等技术。之前完全没有antd的经验,但是有2年react的经验,所以嘛,项目上手难度一般,但是扛不住antd的组件全部要重新学习一下;当前在踩坑……填坑中……废话不多说,咱们直捣黄龙:Form表单中双向数据绑定:getFieldDecorator(key)(组件);Form表单中设置一组输入控...原创 2019-07-14 23:52:33 · 16935 阅读 · 0 评论