ReactJS
React学习笔记和使用记录
清风明月的博客
千言不如一默
展开
-
解决Ant Design错误警告:validateDOMNesting(...): <form> cannot appear as a descendant of <form>.
在ModalForm弹框中使用带搜索的ProTable,报如下错误:devScripts.js:6523 Warning: validateDOMNesting(...): <form> cannot appear as a descendant of <form>.错误信息:<form>里面不能嵌套<form>产生原因:ModalForm是带form的,ProTable的搜索框也是带form的,所以会报错。...原创 2021-08-30 20:34:27 · 19173 阅读 · 4 评论 -
× Error: The slice reducer for key “auth“ returned undefined during initialization. If the state pas
Error: The slice reducer for key “auth” returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don’t want to set a value for th原创 2021-07-03 09:47:05 · 2748 阅读 · 0 评论 -
用getPopupContainer解决Select ProFormSelect DatePicker ProFormDatePicker下拉框在滚动时偏移错位问题
1、Select使用getPopupContainer改变浮层渲染父节点<Select defaultValue="lucy" getPopupContainer={triggerNode => triggerNode.parentElement} onChange={handleChange} > <Option value="jack">Jack</Option> <Option value="lucy">Lucy</Opti原创 2021-06-29 16:53:48 · 2931 阅读 · 1 评论 -
umi Ant Design使用 @alitajs/keep-alive实现KeepAlive状态保存
使用 @alitajs/keep-alive,需要使用组件包裹 layout 的最内层。原理就是劫持了 children1.安装 @alitajs/keep-aliveyarn add @alitajs/keep-alive//或者npm install @alitajs/keep-alive2、在config.js页,即配置页面export default { plugins:['@alitajs/keep-alive'], keepalive:['/about'] //需要Kee原创 2021-05-08 11:21:24 · 2420 阅读 · 1 评论 -
MAC 上解决zsh: command not found: umi
全局安装umi$ tarn global add umi$ umi -vumi@3.4.14在运行umi -v时报 zsh: command not found: umi错误,解决办法如下:1、获取global bin路径$ yarn global bin/Users/*****/.yarn/bin2、运行open命令,打开.bash_profile文件$ open ~/.bash_profile3、在.bash_profile文件添加下面一行,保存export PATH="你的原创 2021-05-06 20:49:35 · 3520 阅读 · 0 评论 -
Ant Design Upload listType=“picture-card“ 实现多图上传以及点击预览图片封装
用户可以上传图片并在列表中显示缩略图,当上传照片数到达限制后,上传按钮消失。点击图片打开图片预览弹框。在使用的地方引入组件,组件在传图后会返回图片数组。import React, { useState, useEffect } from 'react';import { Upload, Modal } from 'antd';import { PlusOutlined } from '@ant-design/icons';//上传前判断标准function beforeUpload(file)原创 2021-04-23 14:48:49 · 2566 阅读 · 0 评论 -
在Rreact项目中使用nanoid生成唯一id,比unid轻便
yarn add nanoidimport {nanoid} from ‘nanoid’;原创 2021-04-22 17:06:42 · 885 阅读 · 0 评论 -
React虚拟DOM是什么?如何实现?
虚拟DOM的设计思想:a、提供一种方便的工具,使开发效率得到保证b、保证最小化的DOM操作,使得执行效率得到保证Virtual DOM算法,包含以下步骤:a、用JavaScript对象结构表示DOM树的结构,然后用这个树建构一个真正的DOM树,插入到文章当中。b、当状态变更的时候,重新构造一棵新的对象树。然后用新的树和旧的树进行比较,记录两棵树的差异。c、把2记录的差异应用到1中所构建...原创 2019-07-09 15:26:18 · 665 阅读 · 0 评论