React
React相关
xishiinsz
喜欢学习JavaScript
展开
-
【更多】动作组件的封装
适用场景在某些【操作】列里的选项过多时,一般都会启用“更多”功能import React from 'react'import { Menu, Dropdown } from 'tinper-bee';const { Item } = Menu;const style = { marginRight: 5, maxWidth: 100, overflow: 'hidden', dis...原创 2019-12-16 19:34:46 · 116 阅读 · 0 评论 -
React Hooks封装一个简单的锚点固钉的组件
JS部分import React, { useState, useEffect } from 'react';import { Icon } from 'tinper-bee'import './index.less'const AnchorLink = props => { const [isExpanded, setIsExpanded] = useState(true)...原创 2019-12-13 20:40:02 · 1224 阅读 · 0 评论 -
2. 尝试使用React Hooks重写【倒计时】组件(Hooks版本)
/* endTime: 目标时间,格式为时间戳endTimeUp: 倒计时结束的回调 */export const CountDown = ({ endTime, endTimeUp }) => { const [day, setDay] = useState(0) const [hour, setHour] = useState(0) const [minu...原创 2019-12-03 16:57:08 · 2167 阅读 · 1 评论 -
1. 尝试使用React Hooks重写【倒计时】组件(Class版本,未完待续......)
已经运行于项目中的组件代码import React, { Component } from 'react'import './index.less'export default class countDown extends Component { constructor(props) { super(props); this.state = { day: ...原创 2019-12-03 16:21:43 · 395 阅读 · 0 评论 -
三元表达式 | JSX | 回调函数
今天还是首次在JSX的点击事件中使用三元表达式,而且式子还是回调函数,特mark一下 <Button onClick={ handleGoback? ()=>handleGoback() : ()=>history.go(-1) } className="u-button-primary" >返回</Button>...原创 2019-11-28 18:14:40 · 814 阅读 · 0 评论 -
React 、箭头函数、bind、this小事记
今天在react项目中使用somefunc.bind(this)语法,但在somefunc方法内部,this却是undefined, 甚是郁闷!后来灵机一动,是不是箭头函数搞的鬼。立马将箭头函数变更为标准function函数,this立马指向了调用somefunc方法的实例环境。...原创 2019-11-20 20:59:12 · 423 阅读 · 0 评论 -
React Hooks 二次封装省市区街道4级联动组件
import React, { useState } from "react";import FormItemPro from 'components/FormItemPro';import { FormControl, Row, Col, Label, Button, Select, Loading, Modal} from "tinper-bee";import request f...原创 2019-11-18 02:06:38 · 1104 阅读 · 0 评论 -
React DevTools pre-release for Hooks | React Hooks可以在google浏览器控制台调试了(测试预览版)
具体参见React DevTools pre-release小技巧1. 导航至 :console-> Components, 见左侧的小小的放大镜图标,在此处输入组件名可以搜索并定位组件2. 导致至:console-> Components, 见右侧(默认停靠位置)的小小多脚虫,点击它可以将Hooks变量映射到 浏览器的console控制台中去,方便调试!...原创 2019-11-09 17:19:51 · 544 阅读 · 0 评论 -
JSX、!!、&&的那些事儿
某个项目中使用了如下代码 , 代码中的arr是动态计算所得,预期是有值时则输出值,无值时则无须渲染。render() { const arr = [1,2,3]; return ( <div className='test-apps'> { arr.length && <d...原创 2019-11-09 11:53:49 · 451 阅读 · 0 评论 -
在数组arr中 间隔插入元素el
某项目要求输出这样的格式(含逗号) 供应商A, 供应商B, 供应商C输入的数据为 arr = [‘供应商A’, ‘供应商B’, ‘供应商B’] ,试了几个现成的API, 好像都无法实现,索性自己封装了一个通用方法。调用: arrIntervalInsert(arr.map(item=><span style={{color:‘red’}}>{item}</span&...原创 2019-11-07 13:06:50 · 762 阅读 · 0 评论 -
基于用友开源前端库、XLSX插件、React Hooks编写的文件导出组件
import React, { useState } from 'react';import { Button, Transfer } from 'tinper-bee'import PopDialog from 'components/Pop';import { Info } from 'utils'import moment from 'moment'import './index....原创 2019-11-20 11:35:07 · 753 阅读 · 0 评论