react
zyj12138
本人已经转行 博客不再更新,宇宙的尽头 终究不是为了进阿里巴巴
展开
-
antd Carousel遍历后台数据 不显示问题解决
在用到antd Carousel走马灯的时候,有时候我们是根据后台数据区遍历显示的,但是在本项目中,是获取了一串[[],[],[]]二层数据去遍历,这个时候,走马灯没内容了,去查看dom节点,发现有内容,但是没高度,怎么设置都无法解决,最后发现问题可能出在一开始他就加载好了,但是你数据那会还没加载出来,这个时候,我们设置一个数据有的时候才显示走马灯:就可以正常显示了。...原创 2020-10-23 10:33:24 · 1831 阅读 · 1 评论 -
react更改host,更改本地开发映射
首先这里我们要将本地更替成我公司这边的地址,我们需要用到工具switchhost,并且在其中这样修改:左边19是我的本地ipv4首选地址,右边是我需要更替成的地址。然后我们一开始创建的react项目默认端口是3000,我们找到这个文件:然后找到如下代码:这里我们已经将3000改成了80然后我们保存启动项目他就会变成:这里我们只需要将Localhost变成我们web.le…所需要替换的地址就可以了,如果还是不能运行,检测一下全url是否是http:开头而不是https...原创 2020-10-19 15:51:51 · 2157 阅读 · 0 评论 -
antd 分页一些css修改
.ant-pagination-item-active{ border-color: #12BF55; a{ color: #12BF55; } } .ant-pagination-item:hover{ border-color: #12BF55; a{ color: #12BF55; } } .ant-...原创 2020-09-15 11:39:56 · 1686 阅读 · 0 评论 -
antd table更改表格行被选中时候的颜色
网上查了挺多方法的什么.clickRowStyl更改都挺麻烦的,其实css你看dom节点属性就会知道,其实改css一步到位: .ant-table tbody > tr.ant-table-row-selected > td{ background: linear-gradient(360deg, rgba(46, 185, 100, 0.09) 0%, rgba(31, 134, 71, 0.02) 100%) ; }效果:...原创 2020-09-11 15:29:22 · 3578 阅读 · 2 评论 -
antd table的默认选择(Do not set ‘checked‘ or ‘defalutChecked‘ in ‘getCheckboxProps’...解决方法)
其实估计你能查这个怎么写应该是碰见了和我一样的问题:明明getCheckboxProps这个就是默认的多选框的配置,怎么checked或者defaultChecked就不行呢,而selectedRowKeys在这里面又不会使用。百度查询的各种方案都是类似的比如:自己研究半天结果还是错,包括那么解决方案来了: const nongRowSelection = { selectedRowKeys:nongId, onChange: (selectedRowKeys, select原创 2020-09-03 16:13:10 · 3924 阅读 · 7 评论 -
react hooks子给父传值
子给父传值需要通过事件方法来传值,这里我们子组件是触发了一个点击事件传值:<Button onClick={()=>setshowregister(false)}>注册</Button>然后我们需要把props解构:const {setshowregister} = props;父组件中的子组件:<Register show = {showRegister} setshowregister = {setShowRegister}></Regist原创 2020-07-20 17:27:29 · 9396 阅读 · 0 评论 -
react hooks中echarts-for-react实时更新解决方法
问题来源是 功能需要点击不同的地方传入不同的echarts x,y数据,但是这个时候你会发现如果正常的写它并不会实时更新,要么停留在第一次数据,要么直接数据无法显示。原因是echarts里面的option没有重新运行解决方案1: <BaseChart notMerge={true} style={{ width: "100%", height: "82%" }} option={原创 2020-07-06 10:51:53 · 3279 阅读 · 0 评论 -
echarts地图移除各种事件
原因是我碰见了echarts 的map.on(‘mouseover’()=>{}),无限增加的问题,由于echarts地图不出中国地图了,所以各种事件找了好久也没有,网上也没找到。T T怎么会这么简单 ,只要使用map.off(‘你所要移除的事件名字’)就可以移除之前存在的这个事件了!记录下来防止以后忘记了!echarts地图万岁...原创 2020-06-18 11:49:22 · 1954 阅读 · 0 评论 -
react中更改了数组但是视图(dom节点)没有变化解决方法
<div className="selection" style={item.select == true?{backgroundColor:'rgba(0,230,155,.8)'}:{backgroundColor:'rgba(0,255,172,.1)'}} onClick={()=>selectReport(index,item.name)}></div>这里我们有一个点击事件,让这个div变色。 const [reportChange,setrepor.原创 2020-06-15 13:54:37 · 3424 阅读 · 2 评论 -
基于react hooks的后台管理系统的路由配置
首先安装react-router-domnpm install react-router-dom --save-dev然后创建一个routers.js文件,存储我们的路由:import PersonalPlan from '../pages/PersonalPlan/PersonalPlan'import Personnel from '../pages/Personnel/Personnel'import Project from '../pages/Project/Project'const原创 2020-06-04 17:53:31 · 1950 阅读 · 1 评论 -
classname库的使用
1.首先安装包npm i classnames --save2.当我们在react hooks中 已经很少使用原生js去获取节点,这时候 如果想给一个节点添加新的classname就会使用classname库,使用方法,比如在一个div中:<div className={classnames({'ii': true, 'uuu': ushow})}> </div>...原创 2020-03-13 11:31:17 · 841 阅读 · 0 评论 -
div内文字如何垂直居中(不是line-height)
别人写好的:垂直居中转载 2020-03-04 11:42:13 · 1034 阅读 · 0 评论 -
react实现适配vw vh rem
首先下载一个sass-resources-loader插件:npm install sass-resources-loader --save-dev创建一个文件:@function vw($px) { @return ($px / 1920) * 100vw;}@function vh($px) { @return ($px / 1075) * 100vh;}@func...原创 2020-01-10 17:13:45 · 1189 阅读 · 0 评论 -
react小记
react如果需要在render中写入根据不同的数据显示不同的代码可以:1.三元运算符2.写一个函数然后再这个函数中进行判断,return回代码:在return代码中,因为jsx的特性,必须所有的代码包裹在一个标签中:不然无法显示。...原创 2019-12-12 11:09:33 · 109 阅读 · 0 评论 -
js实现table数据不断滚动
上一次的项目没想出来,这一次,我想出来了!而且十分容易理解,就是有点麻烦,日后会想更简便的方法:首先获取table的dom: var table1 = document.getElementsByClassName('tableContent')[0]; var table2 = document.getElementsByClassName('tableContent')[1]...原创 2019-12-10 11:41:03 · 2188 阅读 · 0 评论 -
react实现点击导航部分页面跳转(路由)
我们要实现的效果就是点击季度/半年/年度地下div跳转不同的子组件,但是网上对于这种的路由跳转非常少大约的效果就是上述图拉放上部分代码首先引入:import { HashRouter, Switch, NavLink, Route, Redirect } from 'react-router-dom';import quar from '../../components/Prese...原创 2019-11-15 10:37:25 · 5783 阅读 · 0 评论 -
react中碰见父组件引入子组件,子组件无效的情况
就比如这样,你在父组件中引入了子组件内容,却发现无论怎么样都不亮(无效)原因在这里,在react中,引入标志名,必须 第一个字母大写 !!!当我们改成第一个字母大写的时候,就可以成功使用并代码高亮了。...原创 2019-11-18 11:03:02 · 974 阅读 · 0 评论