![](https://img-blog.csdnimg.cn/20201014180756919.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
react+antd
react+antd问题记录
落落的前端学习之路
这个作者很懒,什么都没留下…
展开
-
electron nodejs上传文件获取文件流
使用antd upload组件,electron中ipcRenderer.invoke无法传递文件流;传文件路径过去,然后使用nodejs获取文件流 // 创建数据流 const readerStream = fs.createReadStream(path) const formData = new FormData() formData.append("file_name", readerStream) formData.append(原创 2022-05-31 14:06:55 · 739 阅读 · 0 评论 -
react-infinite-scroll-component 第二次加载无法触发next
react-infinite-scroll-component 是一款滚动加载插件,在页面滚动的时候加载数据,在使用过程遇到一个坑。坑的描述: 在页面滚动的时候,infiniteScroll页面数是自动+1,打个比方说,页面加载到第三页,infiniteScroll无法在重新开始计数,而在某些场景中需要重新开始计数,比如说页面在加载完之后,页面进行搜索功能,然后再取消搜索,page number需要重新计数解决方案: 改变infiniteScroll的key值...原创 2022-05-31 14:04:29 · 1827 阅读 · 0 评论 -
umi config.js整体defineConfig配置
import { defineConfig } from 'umi';export default defineConfig({ hash: true, // 配置是否让生成的文件包含 hash 后缀,通常用于增量发布和避免浏览器加载缓存。 history: { // 配置 history 类型和配置项 type: 'hash' // 可选 browser、hash 和 memory }, base: '/', // 设置路由前缀,通常用于部署到非根目录。 publicPat原创 2022-04-08 11:39:58 · 9299 阅读 · 0 评论 -
React 解决鼠标移入子元素触发父元素的mouseout事件
方法一、 用mouseleave/mouseenter代替mouseover/mouseout【最佳方法】mouseover 与 mouseenter:mouseover => 不论鼠标指针穿过被选元素或其子元素,都会触发 mouseover 事件。mouseenter => 只有在鼠标指针从元素外穿入被选元素(到元素内)时,才会触发 mouseenter 事件。mouseout 与 mouseleave:mouseout => 不论鼠标指针离开被选元素还是任何子元素,都会触发转载 2021-12-21 15:07:08 · 4130 阅读 · 0 评论 -
antd Table/ProList中rowClassName用法(补充记录)
rowClassName={setRowClassName} const setRowClassName = (record) => { return record.id === currentRecord ? styles.checkstyle : ''; };原创 2021-12-16 09:06:46 · 2202 阅读 · 0 评论 -
Error: Module “xxx“ does not exist in container. / antd pro v5启用qiankun报错 / 同时使用mfsu和qiankun报错
一、问题描述我们用antd pro v5搭建前端项目,启用qiankun微前端模式,终端报错如下:Uncaught (in promise) Error: Module “xxx” does not exist in container.while loading “xxx” from webpack/container/reference/mf经过排查,上述问题其实是因为项目同时使用mfsu和qiankun导致的,而antd pro v5脚手架默认是开启mfsu功能的。二、解决方案方案一:1转载 2021-12-15 09:08:39 · 3539 阅读 · 0 评论 -
React 父组件(hooks)调用子组件(calss)方法
父组件(hooks) let richTextRef = {}; <RichText getRichText={getRichText} content={content} onRef={ref => richTextRef = ref} />子组件(class) componentDidMount = () => { this.props.onRef && this.props.onRef(this); }原创 2021-12-07 10:13:29 · 823 阅读 · 0 评论 -
React antd Descriptions span属性无效问题
label=“Status” span={3},但是span为3无效<Descriptions title="User Info" layout="vertical" bordered> <Descriptions.Item label="Product">Cloud Database</Descriptions.Item> <Descriptions.Item label="Billing Mode">Prepaid</Descrip原创 2021-06-01 15:44:14 · 3165 阅读 · 0 评论 -
There are multiple modules with names that only differ in ca
react antd 警告错误原因:引用组件的大小写// 原代码:import AddOrEditFrom from '@/components/Process/AddOrEditFrom';// 修改后代码import AddOrEditFrom from '@/components/Process/AddOrEditFrom';原创 2021-06-01 11:54:20 · 56 阅读 · 0 评论 -
antd react dva在model中使用另一个model的state值
const oldData = yield select(({ baseDictionary }) => { return ([...customPageSetting.list,])});原创 2021-05-25 11:06:16 · 1354 阅读 · 0 评论 -
React 父组件和子组件中的方法相互调用
父组件中调用子组件的getTree方法父组件 setFormValue=()=>{ this.TreeList.getTree } <TreeList onSelect={this.setFormValue} onRef={(ref) => { this.TreeList = ref }} />子组件 componentDidMount = () => { this.props.onRef(this); this.getTree().原创 2021-05-20 16:45:45 · 186 阅读 · 0 评论 -
React 学习笔记 —— Ref Hook
用以下三种方式创建 Ref 都可以import React from 'react'export default function Count () { const [count ,setCount] = React.useState(0) const myRef = React.createRef() const myRef2 = React.useRef() // Ref Hook 的方式 const myRef3 = {current: undefined}.转载 2021-05-19 10:16:40 · 164 阅读 · 0 评论 -
antd form 初始化时间
initialValue: moment(record.showTime, 'YYYY-MM-DD HH:mm:ss')原创 2021-04-20 09:00:50 · 394 阅读 · 0 评论 -
时间转换以及公式
moment(item.updatedAt).fromNow(),距离今天多久了 后续遇到继续补充原创 2021-04-20 09:00:34 · 232 阅读 · 0 评论 -
antd From 中 Form.Item里含有自己封装的组件,获取不到值的解决方法
const { onChange } = this.props; onChange(value)原创 2021-04-20 09:00:18 · 3020 阅读 · 2 评论 -
React - antd4 中在form中为Switch赋值无效
项目场景:React - antd4;From表单问题描述:Switch赋初始值无效# 解决方案: let newCheck = {}; if (propsForm.type === 'switch') { newCheck = { ...newCheck, valuePropName: "checked" } } <Form.Item key={propsFo原创 2021-04-20 09:00:03 · 699 阅读 · 0 评论 -
antd Datepicker组件报错 ——date.clone is not a function或者date1.isAfter is not a function
问题描述:antd Datepicker组件报错 ——date.clone is not a function或者date1.isAfter is not a function原因分析:在From中渲染默认值,一般数据请求拿到返回值存在异步,会晚于渲染,因此日期转换不能放在DatePicker解决方案:在请求接口拿到返回数据的时候就做转换...原创 2021-04-20 08:59:42 · 8615 阅读 · 0 评论 -
Antd Table树形展示,分页后有时候数据渲染不出的问题
项目场景:Antd V4版 网页端问题描述:使用Table树形使用Card onTabChange 切换tab,有时候数据渲染不出的问题 const paginationProps = { Current: currentNumber, size: 'small', pageSize, total, onChange: (PageNumber) => this.getList(PageNumber原创 2021-04-20 08:59:02 · 1300 阅读 · 0 评论 -
ant-design官网打不开 , 需要用镜像地址打开
如果网络不好的时候ant-design 的官网很难打开的 ,用下面的镜像地址就可以打开啦ant-design 官网镜像地址:http://ant-design.gitee.io/index-cnant-design-pro镜像地址:http://ant-design-pro.gitee.io/index-cnantd-mobile镜像地址:https://antd-mobile.gitee.io/index-cn附上ant-design的正常地址,基本上很难打开的https://ant.des转载 2021-04-20 08:59:11 · 4354 阅读 · 0 评论 -
React 向children中传值,layouts
const newChild = React.children.map(children,function(childItem){ return React.cloneElement(childItem,{ key:'传递的数据' })})原创 2021-04-19 10:05:00 · 1378 阅读 · 0 评论 -
父级和子级div的点击事件相互影响
解决方法:event.stopPropagation();原创 2021-04-19 10:03:40 · 945 阅读 · 0 评论 -
将url参数字符串转成数组
const url="/BaseDictionary?Type=34";const arr=url.split('?');// arr=["/BaseDictionary","Type=34"];typeStr = parse(arr[1]);// typeStr={Type: "34"}原创 2021-04-19 10:02:48 · 758 阅读 · 0 评论 -
循环对象
params为对象,key为对象的k值Object.keys(params).forEach(key => { formData.append(key, params[key]);});原创 2021-04-19 10:05:36 · 264 阅读 · 0 评论 -
找到数组最大值
const maxHight = Math.max.apply(null, rowData && rowData.urlImage.map(ele => ele.long) || []);原创 2021-04-19 10:05:21 · 91 阅读 · 0 评论 -
css React 单行省略和多行省略
单行省略white-space: nowrap;text-overflow: ellipsis;overflow: hidden;word-break: break-all;多行省略overflow : hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;我们需要在需要超出加省略号的标签上加一个行内样式: <p class原创 2021-04-19 10:05:28 · 306 阅读 · 0 评论 -
预览视频
window.URL.createObjectURL(files[0].file),原创 2021-04-18 13:48:02 · 133 阅读 · 0 评论 -
React div加载背景图
backgroundImage: `url(${ActivitiesBack})`原创 2021-04-18 13:47:05 · 747 阅读 · 0 评论 -
React antd-mobile listView 手机端 一行两个
Listview antd-mobile const dataSource = new ListView.DataSource({ rowHasChanged: (row1, row2) => row1 !== row2, }); const newDataSource = dataSource.cloneWithRows(Array.from(new Array(lengthArry).keys())); renderRow={(dataItem, rowID) =原创 2021-04-18 13:46:13 · 332 阅读 · 0 评论 -
js 中对于 css 的变量操作(React也可)
提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档文章目录前言一、设置CSS变量?二、读取变量三、删除变量总结前言主要讲js 中对于 css 的变量操作;前端框架:antd框架一、设置CSS变量?document.body.style.setProperty('--primary', '#7F583F’);二、读取变量document.body.style.getPropertyValue('--primary').trim();三、删除变量document.bod原创 2021-04-18 13:41:32 · 1453 阅读 · 0 评论 -
微信公众号网页开发:播放视频,在列表中滑动会脱离文档流
项目场景:antd移动端端开发微信公众号移动端网页开发问题描述:video-react有问题,在跑马灯中第一次白屏,在列表中滑动会脱离文档流原因分析:未知解决方案:直接上代码 <video controls="controls" autoPlay="autoplay" x5-video-player-type="h5"原创 2021-04-18 00:17:02 · 270 阅读 · 0 评论 -
div中直接绑定富文本值
<div dangerouslySetInnerHTML={{ __html: `${currentGoods.ShortDescription}` }}/>原创 2021-04-18 00:11:33 · 411 阅读 · 0 评论 -
antd listView中onEndReached()失效
antd listView中useBodyScroll=true会导致onEndReached()失效原创 2021-04-18 00:10:44 · 629 阅读 · 6 评论 -
js、react对象名和对象属性赋值
const resValue = {};resValue[`standards${standardsNumber}`] = "";Console.log(:test",resValue )//原创 2021-04-18 00:09:24 · 789 阅读 · 0 评论 -
数组方法大全ES5+ES6
JavaScript中创建数组有两种方式使用 Array 构造函数var arr1 = new Array(); //创建一个空数组var arr2 = new Array(20); // 创建一个包含20项的数组var arr3 = new Array(“lily”,“lucy”,“Tom”); // 创建一个包含3个字符串的数组使用数组字面量表示法var arr4 = []; //创建一个空数组var arr5 = [20]; // 创建一个包含1项的数组var arr6 = [转载 2021-04-19 10:05:12 · 155 阅读 · 0 评论