react
文章平均质量分 53
react踩坑
sleeppingfrog
一抹斜阳,一手江湖
展开
-
react18+react-router-dom v6实现路由鉴权
react-router-dom v6实现路由鉴权原创 2022-10-24 16:32:30 · 2305 阅读 · 0 评论 -
关于项目安装报错的一些问题归类
1 react 项目启动报错Html Webpack Plugin: Error: Child compilation failed: Module.createRequire is not a function - child-compiler.js:169 childCompiler.runAsChild [prettie]/[html-webpack-plugin]/lib/child-compiler.js:169:18 - Compiler.js:55.原创 2022-05-20 10:56:50 · 941 阅读 · 0 评论 -
antd4.x必踩的坑(二)
1 antd的select和popover弹层当页面内容过高时滚动悬浮固定在页面某个位置如图。解决办法:给select添加如下属性:getPopupContainer={(triggerNode)=>triggerNode.parentNode}<Space size="large"> <span>定额应用管理</span> <Select defaultValue=...原创 2022-05-01 12:09:05 · 1866 阅读 · 0 评论 -
一个小实例再一次理解react的受控组件
今天在项目开发中遇到这样一个坑。如上图。这个select选择框。逐一勾选的时候,tag标签逐一呈现出来,关闭tag便签。tag标签在输入框内被移除。但是option对应的勾选状态却没有改变。这样就出现了option的勾选状态一直为最初选择时的状态。tag的数量和options的状态没有同步对应。问题在哪?先看看基础的代码: const [selectedList, setSelectedList] = useState([]); const closeTags = (code)原创 2022-04-24 09:04:37 · 201 阅读 · 0 评论 -
项目保存自动格式化探索一
如何实现项目中对css和js文件保存时自动格式化?步骤:1安装插件npm install eslint prettier --save-dev 安装 eslint 以及 prettier npm install eslint-config-prettier eslint-plugin-prettier --save-dev 安装相关插件2 .添加配置.eslintrc.jsmodule.exports = { env: { browser: true, es2021原创 2022-04-23 11:14:09 · 465 阅读 · 0 评论 -
保存自动格式化之二
react项目中实现保存自动格式化:(1).vscode文件夹下新建setting.json文件{ "compile-hero.disable-compile-files-on-did-save-code": true, "editor.formatOnSave": true}(2)在根目录下新建.eslintrc.js文件{ "globals": { "window": true }, "parser": "@babel/eslint-parser",原创 2022-04-23 11:12:34 · 579 阅读 · 0 评论 -
antd中如何实现分页勾选记住之前的选项
antd的表格中勾选状态的控制 的基本逻辑是通过表格属性的rowSelection的selectedRowKeys来实现的。它是一个数组。记录了所有勾选项的字段(常见的比如id) const rowSelection = { selectedRowKeys, onSelect: (record, selected, selectedRow) => { }, onSelectAll: (selected, selectedRows, changeRow原创 2022-04-16 17:35:37 · 3974 阅读 · 6 评论 -
react实现父组件直接执行子组件的方法(useRef)
今天遇到这样一个需求:一个很简单的左右布局。要实现点击左侧数据更新右侧表格。这个表格因为在多处用到,所以被单独封装。表格勾选和全选的逻辑写在了表格这个组件内部。而这也导致了一个问题:每次点击左侧的数据,右侧的表格并没有重置状态。那如何解决这个问题?表格的全选和勾选与全选的状态关联是根据selectRowKeys来控制的。如果selectRowKeys=[],那表格每行的勾选状态将被清空。所以关键就是要在每次点击左侧树形菜单的时候进selectRowKeys的操作。第一种方法:既然表格的状态被原创 2022-04-13 17:01:03 · 3686 阅读 · 1 评论 -
论js数据处理的重要性
今天接到一个需求:如图:左侧的类目自称一块。右侧定额编号和定额名称依此展示。(本例基于react 、antd)这个表格的诡异性就在明明是一个嵌套结构却采用平铺展示的方式,而且平铺的时候类目明明作为一栏却只能展示第一个。先看看后端返回的数据结构:"propertyQuotaList": [{ "keyName": "瓷砖", "quotaList": [{ "id": 15, "categoryId": 5, "name": "Daniel原创 2022-03-12 15:08:37 · 1442 阅读 · 0 评论 -
由一个react tree点击各层高亮状态显示想到的
今天有这样一个需求:注意:每次点击每个层级。点击的项高亮。层级之间相互不干扰。最初的实现思路:设置一个currentIndex。点击该项的时候通过currentIndex==item对应的index就ok了。但是问题是层级很多呢?那需要在useState中维护多个index。一一对应、这样非常不科学。后来有了个思路:在useState中定义一个数组 ids= [a,b,c,d]分别表示各个层级的当前点击时的项目id。每次点击的时候更改这个数组对应的id。而我们高亮的判断条件就是当前点原创 2022-03-04 18:03:50 · 668 阅读 · 0 评论 -
antd中封装Modal的几种方式
1 利用Modal.method.特点:无需考虑visible。抛出数据方便基本使用:1新建一个Dilaog.js。核心内容是创建一个Modalimport {Form,Modal,Input} from "antd"import React from "react"import {Button} from "antd"function CreatModal(props) { const Content = ({formRef}) => { const原创 2022-02-18 15:50:59 · 5643 阅读 · 2 评论 -
react hooks+antd实现一个弹窗2次封装
弹窗在项目业务中很常见,接下来我们将基于antd的Modal组件实现2次封装。比如我们这个组件就叫SelectCityDialog。基本思路就是:(1)弹窗组件的显示和隐藏由SelectCityDialog内部一个变量visable来控制,而这个值为true或者false则是由我们传入的值来控制。也就是说父组件传值给SelectCityDialog控制显示和隐藏(2)由于我们要在外部(父组件)来打开这个弹窗,所以我们要在外部定义一个变量比如我们就叫vis,它每次值的变化则会传递给SelectCi原创 2021-11-04 14:09:26 · 2131 阅读 · 0 评论 -
antd4.x开发过程中的一些坑
表单验证:1相较vue中表单验证,antd中对输入框的验证全部放到了Form.Item中。同时触发的事件诸如onBlur,onChangeForm.Item中,(通过validateTrigger来指定)2 对于自定义校验validator函数。它会在每次事件触发的时候执行,这样就会出现如果设置了rules={ [ { required: true, .原创 2021-11-03 15:49:41 · 1462 阅读 · 0 评论 -
一个完整的react管理后台路由与项目配置
一:基本项目目录结构如下:二: 路由配置如下import {HashRouter as Router,Switch,Route,Redirect} from "react-router-dom"import Login from "../pages/Login"import Layout from "../pages/Layout"import HouseStyle from "../pages/HouseStyle"import Permission from "../pa...原创 2021-10-25 11:45:17 · 975 阅读 · 0 评论 -
create-react-app配置antd主题色
js单独打印图片 - 小林不会飞 - 博客园原创 2021-10-25 11:37:21 · 880 阅读 · 0 评论 -
antd 踩坑记录
1 tree组件无法点击三角形展开收缩 原因:没有给数组设置key字段2 设置了treeData为什么无法渲染?原因:异步原因。需要给tree组件添加如下逻辑{ treeData.length > 0 ? ( <Tree blockNode treeData={treeData} ...原创 2021-09-01 16:20:57 · 344 阅读 · 0 评论 -
异步action,redux-thunk在hooks中的应用
这一次,我们要应用react-redux的最新hooks写法,实现一个简单的异步实例。效果很简答。当我们点击按钮的时候请求数据,页面显示加载中...,数据请求结束。渲染列表。为了适应hooks写法。react-redux库引入了几个新的api:1 useSelector:不用connect包裹,不用mapStates直接获取在reducers中预定义的state数据。也就是说如果我们reducers写法如下:constinitialState={list:[...原创 2021-07-12 16:59:01 · 353 阅读 · 0 评论 -
reat hooks实现全局拦截守卫
----------------------------续----------------------------------------前面写了一篇文章,关于全局拦截守卫。虽然实现了全局拦截。但是并不完美。我们只能针对一级路由有效。也就是整个routes数组只有一层。如果还有嵌套路由,二级,三级,就无能为力。因为我们在页面切换的时候,我们想获取到当前路由path和数组中匹配的那条数据,是通过consttargetRouteObj=routeData.find((item)=>i...原创 2020-11-12 15:13:25 · 480 阅读 · 0 评论 -
用react hooks实现一个全局路由拦截(一)
react hooks 已经盛行一段时间。最新的react-router-dom 和react-redux也都同时支持了hooks写法。我们可以抛弃 withRouter轻松获取location等对象,也再也无须写mapStateToProps和mapDispatchToProps。下面我们结合react-router-dom实现一个简单的登录验证和全局拦截实例。注意:react版本至少要16.8,本实例基础库版本如下:"react":"^17.0.1","react-dom":...原创 2020-11-09 16:44:08 · 3469 阅读 · 0 评论 -
react配置webpack-bundle-analyzer项目优化踩坑
webpack-bundle-analyzer是一款神奇。能分析项目中依赖包的大小,从而让开发者能有针对性的进行优化。步骤:(1)安装 cnpm iwebpack-bundle-analyzer --save-dev (2) 在config文件夹中找到webpack.config.js,进行如下操作特别注意这里newBundleAnalyzerPlugin的时候要找准位置;和module参数同级的plugins;[]才是配置plugin的地方这样我们在npm run ....原创 2020-08-22 14:06:02 · 4152 阅读 · 1 评论 -
reactHook实例之TodoList
上手reackHooks实现一个todolist用到的hooks:useContext、useReducer、useState项目结构:----nav组件 头部输入框和点击添加按钮-----content组件 内容区域主要是渲染全局state数据的列表----footer组件 底部,实现全选、全不选按钮,提示当前勾选了多少个...原创 2020-05-02 12:32:08 · 756 阅读 · 1 评论 -
react-redux 异步请求实例解析
首先我们需要用node搭建一个后台。模拟真实接口。我们采用koa2作为后台,建立web服务器代码如下:---------------------------------------------------------------------------------------------react脚手架中,我们需要在package.json中设置proxy我们请求的接口会以...原创 2019-09-01 10:20:06 · 3005 阅读 · 0 评论 -
mobx基本概念介绍
安装遇到的问题:Mbox的装饰器语法为es7语法。所以需要提供babel支持。1 需要安装transform-decorators-legacy。 Npm install babel-plugin-transform-decorators –save-dev Npm install babel-preset- stage-1 Npm install babel-prese...原创 2019-02-25 10:25:30 · 685 阅读 · 0 评论 -
redux--react-redux 相关概念解析
Redux react 1 Redux是一个单独的状态管理库。要实现react和redux的关联管理。我们需要利用react-redux。它提供了两个核心方法:Provider和connect。前者负责给react项目根组件包裹一层外衣。然后把store作为参数给传递进来。这样它就是所有组件的根组件,从而可以把数据层层传递给子组件。Connect则负责连接单个组件和store的交流。某个...原创 2019-02-25 10:22:29 · 177 阅读 · 0 评论 -
一个简单的实例实现react路由拦截
不同于vue,通过在路由里设置meta元字符实现路由拦截。react实现路由拦截的基本思路还是利用Route 的render函数。通过判断拦截条件(比如sessionID是否存在)来实现不同的组件的跳转,从而实习拦截。接下来,我们实现一个简单的实例了解路由拦截的基本流程。页面初次渲染的时候,需要我们进行登录。在这个首屏的页面里,我们放入一个链接。当点击链接,我们想进入我们的布局页面,(实际项目中是...原创 2018-07-07 20:17:07 · 12454 阅读 · 0 评论