随笔分类 -  react从入门到放弃

上一页 1 2 3 下一页
ts那些记得有些烦的定义
摘要：// 来自antd的menu组件定义 export interface SelectParam { key: string; keyPath: Array<string>; item: any; domEvent: Event; selectedKeys: Array<string>; } expo 阅读全文
posted @ 2020-11-09 17:40 芝麻小仙女 阅读(450) 评论(0) 推荐(0) 编辑
【react+antd】当你使用了可选择的table【rowSelection】，却在操作后无法清除已选择状态
摘要：可以在rowSelection对象内声明selectedRowKeys，通过改变它来控制表格的选中状态： const [selectKeys, setSelectedKeys] = useState<any[]>([]); // 通过 rowSelection 对象表明需要行选择 const row 阅读全文
posted @ 2020-10-26 13:39 芝麻小仙女 阅读(5375) 评论(1) 推荐(1) 编辑
React+ts+stories实现简单的切换按钮【ToggleBotton/ToggleBox]
摘要：Demo效果： 组件实现： import React from 'react'; import clsx from 'clsx'; import { makeStyles } from '@material-ui/core/styles'; import { Box, Typography } fr 阅读全文
posted @ 2020-08-19 17:26 芝麻小仙女 阅读(442) 评论(0) 推荐(0) 编辑
用storybook开发一个自己的图标库继续【可复制图标代码，可搜索，可切换图标类型】
摘要：效果： 需求：显示所有的图标（现在是我写的mock数据），可以切换图标类型，可以进行关键词搜索 代码： import React from 'react'; import copy from 'copy-to-clipboard'; import SvgOaIconAddressDefault fr 阅读全文
posted @ 2020-07-24 18:05 芝麻小仙女 阅读(494) 评论(0) 推荐(0) 编辑
当你的storybook组件库要统一把svg图标转为js组件【使用svgr最简单的实现】
摘要：先把图标同意放置在文件夹中，以icons为例安装svgr/cli： yarn add @svgr/cli --dev如果报错，就先装svgr/webpack：yarn add @svgr/webpack --dev然后跑: # Usage: npx @svgr/cli [-d out-dir] [s 阅读全文
posted @ 2020-07-23 17:17 芝麻小仙女 阅读(1444) 评论(0) 推荐(0) 编辑
react+antd+select+lodash模糊搜索防抖
摘要：import { debounce } from 'lodash'; <Form.Item label="前置任务" vvspan={24} labelCol={{ md: 3 }} wrapperCol={{ md: 21 }}> {getFieldDecorator('frontTaskId', 阅读全文
posted @ 2020-07-15 16:14 芝麻小仙女 阅读(2427) 评论(3) 推荐(1) 编辑
react+andt+Steps 步骤条改造【计划开始时间/计划截止时间/实际开始时间/实际结束时间】
摘要：【收集一下大佬的代码，膜拜大神】 需求: 实现代码: import React from 'react'; import { Steps, Icon } from 'antd'; import moment from 'moment'; import cn from 'classnames'; im 阅读全文
posted @ 2020-07-08 16:42 芝麻小仙女 阅读(1033) 评论(0) 推荐(0) 编辑
天，小时，分钟的时间转换
摘要：// 时间换算-x天x小时x分钟 export function TimeFormat(value, hours = 8) { if (!value) { return '0天0小时0分钟'; } const day = parseInt(value / 60 / hours, 10); const 阅读全文
posted @ 2020-07-07 15:39 芝麻小仙女 阅读(1010) 评论(0) 推荐(0) 编辑
antd+table--->当你的表格数据需要改为树形展示
摘要：效果： 话不多说，直接上代码: 【不知道从哪搜罗来的改了改】 // 处理数据 const getData = list => { // 删除所有children list.forEach(item => { delete item.children; }); // 将数据存储为 以 id 为 KEY 阅读全文
posted @ 2020-07-01 16:37 芝麻小仙女 阅读(3903) 评论(0) 推荐(0) 编辑
react+antd实现列表互不影响的展开每条内容
摘要：需求： 列表可以分别展开自己的内容，互不影响，我选择了手搓…… 每一条的展开or关闭状态，与内容展示，存为一个对象，最后合为一个数组，存放在状态里 const [content, setContent] = useState([]); 数据请求拿到数据以后处理一下数据： const fetchRec 阅读全文
posted @ 2020-06-28 14:26 芝麻小仙女 阅读(687) 评论(0) 推荐(0) 编辑
react+antd 步骤条改为时间顺序条
摘要：需求描述：返回四个时间，按照顺序展示，如果返回的时间相同，则在一个步骤点展示数据 拿到数据： 排序好的数据： 处理好的数据： 页面效果： 代码实现： const getList = () => { const newList = stepList.sort( (a, b) => Date.parse 阅读全文
posted @ 2020-06-19 11:03 芝麻小仙女 阅读(1077) 评论(0) 推荐(0) 编辑
react+antd form表单项动态添加数据的实现
摘要：需求效果功能如图： 代码： const [relateList, setRelateList] = useState(getPath(initInfo, 'relateLinkList', [] || [])); 这个是因为此页面还实现了编辑功能，需要渲染初始数据，此时需要监听一个已有的列表，进行删 阅读全文
posted @ 2020-06-19 10:48 芝麻小仙女 阅读(17239) 评论(0) 推荐(0) 编辑
react+antd 开始时间与截止时间的验证
摘要：<Form.Item label="开始时间"> {getFieldDecorator('planStartTime', { rules: [ { validator(_, value, callback) { if (value && form.getFieldValue('planEndTime 阅读全文
posted @ 2020-06-19 10:28 芝麻小仙女 阅读(1968) 评论(0) 推荐(0) 编辑
如何解决antd Select的suffixIcon不生效
摘要：添加showArrow属性（无语） 阅读全文
posted @ 2020-06-15 17:17 芝麻小仙女 阅读(2643) 评论(0) 推荐(0) 编辑
React实现块依次从下到上进入的动画
摘要：app.js 在app.js中传递scrollTop给组件，用来计算动画触发时的高度 随便一个组件的代码： ps： forwards：当动画完成后，保持最后一个属性值（在最后一个关键帧中定义）。 from 大佬 阅读全文
posted @ 2019-09-20 10:52 芝麻小仙女 阅读(598) 评论(0) 推荐(0) 编辑
React-使用react-move实现从下到上进入的动画 +使用react-intl实现国际化
摘要：一、使用react-move实现从下到上进入的动画 4.插件2019-09-19官网 https://www.npmjs.com/package/react-move 二、国际化 1.安装依赖 npm的话命令是:npm install react-intl --save yarn的话命令是:yarn 阅读全文
posted @ 2019-09-19 14:27 芝麻小仙女 阅读(838) 评论(0) 推荐(0) 编辑
React-基于react-transition-group 实现从下到上进入的入场动画
摘要：本功能是实现两个下拉选择框依次在页面滚动到指定位置时由下往上入场。 利用了CSSTransition实现。 react-transition-group官网：http://reactcommunity.org/react-transition-group/css-transition 页面代码： s 阅读全文
posted @ 2019-09-18 15:54 芝麻小仙女 阅读(1620) 评论(0) 推荐(0) 编辑
react+antd+antd pro+dva ---> table 升降序及筛选的使用（排序+筛选）
摘要：这次的需求是列表页可以按照时间进行升降序的排列（直接请求后端）及列筛选，如图： 在打开页面时，我们要首先请求接口，获取缺卡类型的筛选数据，然后把数据拼成正确的格式赋给table的column： // 获取缺卡类型和缺卡状态的筛选菜单数据 getTypeListAll = () => { const 阅读全文
posted @ 2019-08-23 14:04 芝麻小仙女 阅读(4526) 评论(0) 推荐(0) 编辑
react+antd+dva ---> Echarts-for-react 图表的使用（柱状图+多环形图）
摘要：1.引入 import ReactEcharts from 'echarts-for-react'; 2.jsx里写入组件 <ReactEcharts option={getOptionAxis( axisData.list )} style={{ width: '100%', height:'40 阅读全文
posted @ 2019-07-02 11:52 芝麻小仙女 阅读(5471) 评论(0) 推荐(0) 编辑
react+antd+dva --->TreeSelect 树选择器组件的不联动+多选+初始值渲染
摘要：普通的用法不赘述了，记录的关键是这次的需求 产品大佬的要求是这样的： 1.我们树父与子之间互不关联 2.选中时输入框显示互不关联 以上两点好说，加俩属性嘛： 那么问题来了，加了这俩属性之后，文档的描述是这样的： 秀，给我来个强制，理解不了看下上下文，也就是说： ok，也就是我们每次选中的时候，得到的 阅读全文
posted @ 2019-06-25 15:20 芝麻小仙女 阅读(3274) 评论(0) 推荐(0) 编辑

上一页 1 2 3 下一页
点击右上角即可分享
微信分享提示