也是在最近一点时间写小demo 遇到的一些问题 比如在用户界面，用户选择本地的一张照片，前端把照片传到后端，后端怎么把照片保存到服务器，然后返回给 图片线上地址。也是找了一些文章，然后分享下。  技术 前端：react 后端：egg.js(node框架) base64 转换  转二进制 保存图片 base64(mdn) Base64 是一组相似的二进制到文本（binary-to-text）的编码规则，使得二进制数据在解释成 radix-64 的表现形式后能够用

1、使用 react-router-dom 中的 Link 实现页面跳转 一般适用于，点击按钮或其他组件进行页面跳转，具体使用方式如下： <Link to={{ pathname: '/path/newpath', state: { // 页面跳转要传递的数据，如下 data1: {}， data2: [] }, }} > <Button>

前言 😎😎欢迎来到我的博客😎😎📔博主是一名大学在读本科生，主要学习方向是前端😊。 🍭目前已经更新了【Vue】、【React–从基础到实战】、【TypeScript】等等系列专栏🤩 🛠目前正在学习的是🔥 R e a c t 框 架 React框架 Rea

1、路由传参 1、动态路由传参 使用prop进行接收 props.match.params.参数名 2、query传参 this.props.history.push({ pathname: ‘路由’, query:{参数名：参数值} }) 接收: this.props.location.query.参数名 3、state传参 this.props.history.push({ pathname: ‘路由’, state:{参数名：参数值} }) 接收: this.props.locat

背景：搜索网上文章，一步步的配置完.eslintrc.js，发现：压根不生效！ 配置过程可以说是很仔细了，把官方文档也翻看了一些。认认真真的把我需要的读了一遍。但结果就是：我特意写两个 let a=1; 它还是检测不出来！ 未接触过eslint配置的宝宝请看 这里。 一、原因 查找原因的步骤： 点开项目中的 .eslintrc.js文件（也可以是json文件） 点击编辑器右下角的ESLint 根据提示查找原因。 如图所示： 下面说说上述问题原因：相关依赖包未安

嵌套路由的实现 create-react-app router_app，创建react项目：router_app。默认使用当前react的最新版本：react@18、react-dom@18。npm install -save react-router-dom，默认下载安装最新版本r：react-router-dom@6。 涉及的文件包括： 模板文件index.html 入口文件index.js 路由表文件routes/index.jsx 入口组件App.js 路由组件page

前言 平时我们在进行React项目开发的时候，可能会使用到Less或者Sass进行样式开发，React项目当中只集成了Sass，因此对于习惯书写Less的小伙伴十分不友好，所以我们需要知道如何在React项目中配置Less 一、webpack.config.js配置（不推荐） 第一种方式就是在webpack.config.js中进行配置，这样进行配置需要暴露出React的config配置文件，不利于项目的升级 1.安装less和less-loader yarn add

报错信息：  react-router-dom v6 里 export 'useHistory' (imported as 'useHistory') was not found in 'react-router-dom'; 解决方案： 从报错 很容易看出来 是 useHistory 引入的问题。这个就涉及 react-router-dom这个插件的版本问题了。   react-router-dom v4 可以使 withRouter (函数组件里可以用这个方法), cla

背景 使用antd写了一个table,为了交互上友好;要求如下 下图红色区域铺满屏幕剩余高度; table高度不限,有纵向滚动条; 页面不允许出现纵向滚动条; 全量demo地址 知识剖析 要求1和要求3是同时实现的,只要table铺满屏幕剩余高度即可 要求2的纵向滚动是通过antd-table的scroll属性实现的,只需要把y的值设置为屏幕剩余高度即可 那现在的关键就是如何获取屏幕剩余高度了 屏幕剩余高度=100vh(视窗高度)-header-面包屑-Tab-操

Reac项目中webpack需要手动配置，不像Vue自带vue.config,js，配置插件之类的很方便。 React项目中配置webpack可以使用npm run eject,但官方不推荐这种用法，因为这种方法是不可逆的，会对后续使用造成麻烦。 这里推荐按照Ant Design中的方法使用 craco （一个对 create-react-app 进行自定义配置的社区解决方案）对 create-react-app 的默认配置进行自定义 配置示例 要求： React移动端项目，支

背景：在使用vant UI组件库的时候，当列表加载到底部的时候，可以结合load加载事件，继续获取下一页的数据 但是和tab切换结合的时候，就会出现问题了，比如第一个tab下面我进行了忘下滑动的滚动事件，然后我再切换到第二个tab下面，这时候，又会自动执行了一遍加载事件（感觉1.应该是刚开始没有数据，然后直接到底部了，所以唤起了load事件2.第一个列表由于往下滑动了，所以滚动条还在刚才滑动下去的位置，所以直接到底了又触发了load加载事件） 所以针对这两个问题 做了以下处理1.首先页面上 l

时隔一年半之久再次重新学习 React，好多都还是原来的样子，这次我要重新开启 React 的大门，希望各位小伙伴可以一起讨论学习呦～ 前言 今天我们开启第三个专题：React 中函数组件和类组件的区别。 一、函数组件 和 类组件 1. 函数组件 函数组件也称无状态组件，顾名思义就是以函数形态存在的 React 组件。 在 hooks 出现之前，react 中的函数组件通常只考虑负责UI的渲染，没有自身的状态，没有业务逻辑代码，是一个纯函数。下面这个函数组件