关注
分享
React 入门学习
java持续实践
Java开发
展开
-
解决antd table 获取数据后 不显示数据
偶现bug: 从接口获取数据后 antd table 不显示数据.解决 :获取请求的结果后, 重新遍历一遍 const listArr = res.data.content.map((obj: any) => ({ ...obj, })); setList(listArr);原创 2021-04-22 14:09:21 · 3320 阅读 · 1 评论 -
React 数字除以100保留两位小数并且用科学计数法显示
方法:// 货币计数法的方法const priceSplitter = (number: number) => (number && number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ','));/** * 金额相除100保留2位小数 */export function divideKeepTwoDecimal(num: number) { if (!num) { return 0; } // 小数点原创 2021-03-03 14:32:14 · 1205 阅读 · 0 评论 -
React 使用query在路由中传递多个参数
参数传递方import React from 'react';import { history } from 'umi';const Sending: React.FC = () => { // 跳转页面 handleClick: (record: any) => { history.push({ pathname: '/页面路径/Detail/', query: { stockType: record.stock原创 2021-02-09 17:57:58 · 1376 阅读 · 0 评论 -
antd 列表排序
const handleTableChange = (pagination, filters, sorter) => { console.log('sorter.field', sorter.field); console.log('sorter.order', sorter.order); console.log('pagination', pagination); }; { title: '时间', dataIndex: 'time', .原创 2021-02-07 11:24:07 · 678 阅读 · 0 评论 -
React 中使用copy-to-clipboard
import copy from 'copy-to-clipboard'; const handleCopyPageLink = (record: any) => { const { id } = record; const articleLink = `${pageLink}/${id}`; if (copy(`${articleLink}`)) { message.success('已复制'); } }; { title:原创 2021-02-01 17:34:05 · 824 阅读 · 0 评论 -
antD 分页组件 pagination 的showTotal用法
用法如下, showTotal 要定义为一个对象的方法才行. // 分页参数 const paginationObj: object = { ...pagination, showQuickJumper: true, // 显示每页多少条数据 showSizeChanger: true, hideOnSinglePage: false, pageSizeOptions: ['10', '30', '50', '100'], onChange: p原创 2021-02-01 17:25:51 · 4468 阅读 · 1 评论 -
AntD DatePicker日期选择框 选择范围为某一年的1月1号到当天
import { DatePicker, Space } from 'antd';const { RangePicker } = DatePicker;function disabledDate(current: any) { return ( current // 日期范围, 限制为2021年1月1号,到当前的时间 && (current > moment().subtract(0, 'days') || curren原创 2021-01-26 16:04:04 · 871 阅读 · 0 评论 -
React定义类式组件
React定义类式组件 代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>2_类式组件</title></head><body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 -->原创 2021-01-10 16:50:08 · 655 阅读 · 0 评论 -
React 定义函数式组件
react定义函数式组件的代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>1_函数式组件</title></head><body> <!-- 准备好一个“容器” --> <div id="test"></div> <!-- 引入react核心库 --&g原创 2021-01-10 16:22:32 · 1020 阅读 · 0 评论 -
JSX语法规则
jsx语法规则：1.定义虚拟DOM时，不要写引号。2.标签中混入JS表达式时要用{}。3.样式的类名指定不要用class，要用className。4.内联样式，要用style={{key:value}}的形式去写。5.只有一个根标签6.标签必须闭合7.标签首字母(1).若小写字母开头，则将该标签转为html中同名元素，若html中无该标签对应的同名元素，则报错。(2).若大写字母开头，react就去渲染对应的组件，若组件没有定义，则报错。...原创 2021-01-10 16:18:54 · 265 阅读 · 0 评论