随笔分类 - React
摘要：使用antd Image加载多张图片时，遇到网络之类的问题，导致图片加载失败，希望能重试3次，之后再展示默认图片 代码如下： const retry = {} const handleError = (e, id, url) => { let cur = retry[id] retry[id] =
阅读全文
摘要：需求 当输入关键词时，远程搜索内容，有返回则下拉展示，无返回也要展示当前输入的关键词(不能失去焦点后输入框就置空了)，然后点击查询就会根据输入框中的值查询相关列表信息 代码如下： const [unitName, setUnitName] = useState(); const [unitNameK
阅读全文
摘要：问题 如下，偶现点击选择框，下拉面板空白（数据确定已返回） 解决 查看github中的issues发现其他人也有同样的问题，大概是和 virtual list 有关 https://github.com/ant-design/ant-design/issues/26116 修改代码如下： <Sele
阅读全文
摘要：安装 rc-field-form yarn add rc-field-form 使用 import { View, Button, Input } from "@tarojs/components"; import Form, { Field, useForm } from "rc-field-fo
阅读全文
摘要：一、前端框架（或者库）升级的原因： a、前端技术更新比较快，需要不断更新保持技术和依赖都和社区同步； b、新版脚手架对性能和开发体验都进行了很多优化，新版脚手架基于社区2021年的相对最优解决方案和依赖。如vite2.0、react17（相比react16版本有了核心实现的重构）等； 二、详细描述要
阅读全文
摘要：实现效果 代码 tableData为Table的数据 const mergeCells = (text, dataSource, index, key) => { // 上一行该列数据是否一样 if (index !== 0 && text dataSource[index - 1][key]) {
阅读全文
摘要：实现效果 使用antd中的Table，设置固定列宽，当文字超出时省略，先看实现效果： 方法一 部分代码 使用ellipsis进行省略，使用Tooltip(引入自antd)展示全部的内容。 const TABLE_COL_WIDTH = 200; const columns = [ { title:
阅读全文
摘要：代码如下： import ReactDOM from 'react-dom'; import { Spin } from 'antd'; export const showGlobalLoading = () => { const dom = document.createElement('div'
阅读全文
摘要：ReactDOM.createPortal(child, container) Portal 将提供一种将子节点渲染到 DOM 节点中的方式，该节点存在于 DOM 组件的层次结构之外。 因此 Portals 适合脱离文档流(out of flow) 的组件，特别是 position: absolut
阅读全文
摘要：方式一：使用react-draggable实现拖拽 安装 yarn add react-draggable 使用 import Draggable from 'react-draggable'; export default function TableModal() { const [bounds
阅读全文
摘要：错误代码一： useEffect(async()=>{ await myFunc(); },[]) const myFunc = async()=>{...}; 错误代码二： useEffect(()=>myFunc(),[]) const myFunc = async()=>{...}; 以上写法
阅读全文
摘要：##问题 在项目中使用了ReactToPrint来实现打印，但是trigger属性中的按钮需要点击才能执行打印。 期望能在组件加载完成时自动执行打印方法。 ## 解决 可在组件加载完成时，通过id获取组件，并执行该组件的click方法。 代码如下： ``` import React, { useRe
阅读全文
摘要：一、f2elint全局安装 yarn安装 yarn add global f2elint 或者 npm安装 npm i f2elint -g 查看是否安装成功 npx f2elint -h 二、f2elint初始化 在项目根目录下初始化 npx f2elint init 1.会提示选择项目的语言和框
阅读全文
摘要：使用html2canvas将DOM生成canvas，然后生成对应的图片，将图片生成pdf ##一、安装和使用 安装： npm install --save html2canvas npm i jspdf --save 使用： import jsPDF from 'jspdf' import html
阅读全文
摘要：antd中 DatePicker 设定可选时间范围 <Form.Item name="monthStr"> <RangePicker allowClear={false} // picker="month" format="YYYY-MM-DD" // defaultValue={[moment()
阅读全文
摘要：前段时间开始一个react的项目，因为没有正式评审所以团队自己在根据ui写部分组件，现在正式开始做了后启用了css Module。 如何快速将css引入方式以及className='xx 修改为className={xx['xx]}呢。 一个一个组件进行修改非常影响效率，这时我们可以使用vscode
阅读全文
摘要：实现效果 使用 antd Table，希望将表格中 “分数”列，找出最大值，并区分颜色 代码 const column = [ // ... { title: '方案评估分数', dataIndex: 'score', onCell: (record, index) => { let color =
阅读全文
摘要：umi版本要求：3.5+ 什么是 mfsu mfsu 是一种基于 webpack5 新特性 Module Federation 的打包提速方案。核心原理是将应用的依赖构建为一个 Module Federation 的 remote 应用，以免去应用热更新时对依赖的编译。 因此，开启 mfsu 可以大
阅读全文
摘要：let pointAndLineDataReady = false; export const POINT_LINE_LIST = [ 'http://10.110.10.15:9000/frontend/gis-model-point.min.js', 'http://10.110.10.15:9
阅读全文
摘要：实现了pdf翻页，放大，缩小，全屏展示，右键打印。 实现代码： js: import React, { useState, useEffect } from 'react'; import PropTypes from 'prop-types'; import { Spin, Tooltip, In
阅读全文
浙公网安备 33010602011771号