自定义博客皮肤VIP专享

*博客头图:

格式为PNG、JPG,宽度*高度大于1920*100像素,不超过2MB,主视觉建议放在右侧,请参照线上博客头图

请上传大于1920*100像素的图片!

博客底图:

图片格式为PNG、JPG,不超过1MB,可上下左右平铺至整个背景

栏目图:

图片格式为PNG、JPG,图片宽度*高度为300*38像素,不超过0.5MB

主标题颜色:

RGB颜色,例如:#AFAFAF

Hover:

RGB颜色,例如:#AFAFAF

副标题颜色:

RGB颜色,例如:#AFAFAF

自定义博客皮肤

-+
  • 博客(154)
  • 收藏
  • 关注

原创 前端面试题

前端面试遇到所有的面试题总结,更新中~

2018-10-30 22:26:30 10854 1

原创 《react》前端面试题

react面试题

2024-03-19 19:21:20 1204

原创 炫猿导航,自定义导航

欢迎使用炫猿导航。

2023-06-30 17:33:01 1112

原创 vue项目本地运行时,调用post接口出现403报错问题解决

【代码】vue项目本地运行时,调用post接口出现403报错问题解决。

2023-05-10 11:43:13 1022 1

原创 两数之和

给你两个 非空 的链表,表示两个非负的整数。它们每位数字都是按照 逆序 的方式存储的,并且每个节点只能存储 一位 数字。输入:l1 = [9,9,9,9,9,9,9], l2 = [9,9,9,9]输入:l1 = [2,4,3], l2 = [5,6,4]请你将两个数相加,并以相同形式返回一个表示和的链表。这样就完成了两个链表的相加,并返回和的链表。输入:l1 = [0], l2 = [0]输出:[8,9,9,9,0,0,0,1]指向新的节点,以便下一次循环添加节点;节点的值,若该节点为空则赋值为 0;

2023-04-10 20:20:56 609

原创 js实现根据树子节点id查找所有父节点id

js实现根据树子节点id查找所有父节点id

2023-03-01 14:47:24 2334 2

原创 js实现根据树子节点id查找当前父节点id

js实现根据树子节点id查找父节点id

2023-03-01 11:49:35 2716 1

原创 JS删除嵌套对象中的空值

JS删除嵌套对象中的空值

2023-02-16 19:32:12 231

原创 关于使用 react-sortable-hoc 拖动时丢失拖拽元素的样式

在拖动项目时,该元素不再链接到父类,而是父类之外的单独元素。因此它失去了所有的造型!因此为了解决这个问题,我们可以像这样把元素样式定义在全局。使用less样式嵌套。

2023-02-08 16:19:30 764 5

原创 react17安装react-dnd提示Cannot find module ‘react/jsx-runtime‘解决方案

react17安装react-dnd提示Cannot find module 'react/jsx-runtime'解决方案

2023-02-03 16:37:22 839

原创 echarts 设置label和labelLine不生效问题

官方: label: { show: true, position: 'outside' }, labelLine: { show: false },实际:label: { normal: { show: true, position: 'outside', formatter: '{c}' }},labelLine: { normal: { show: true, le

2022-04-24 11:30:52 7895 2

原创 关于antd Layout的Content在首次渲染时宽度超出的问题

大概原因是因为项目是layout包裹content,当layout和当前dom都重载时,layout还未render完毕时,当前dom的this.elementRef.current获取的宽度会是整个屏幕;当layout加载完毕,Content会超出原本设定的100%;在layout添加hasSider即可官方文档:布局 Layout - Ant Design...

2022-04-22 23:58:11 1031

原创 flex 最后一行 左对齐

场景 :无法确定flex换行后列表个数又不固定,直接调试html特别麻烦,使用Grid布局Grid布局天然有gap间隙,且天然格子对齐排布,因此,实现最后一行左对齐可以认为是天生的效果。<div class="box"> <div class="list"></div> <div class="list"></div> <div class="list"&g..

2022-04-10 18:29:07 1311

原创 自定义antd table子表格的展开和收起,一键展开收起

效果:代码:import React from 'react';import {Table} from 'antd';const key = []; // 定义一个空的数组。export default class xiaoyu extends React.Component { constructor(props) { super(props); this.state = { open: false, ..

2022-04-07 15:12:25 4987 2

原创 解决Echarts折线图x轴数据较多,展示不全的问题

解决Echarts、echarts-for-react折线图x轴数据较多,展示不全的问题

2022-02-17 18:39:15 9012 3

原创 关于CSS动画播放完后消失

animation-fill-mode: forwards值 描述 none 不改变默认行为。 forwards 当动画完成后,保持最后一个属性值(在最后一个关键帧中定义)。 backwards 在 animation-delay 所指定的一段时间内,在动画显示之前,应用开始属性值(在第一个关键帧中定义)。 both 向前和向后填充模式都被应用。 ...

2021-12-10 17:49:28 2927

原创 使用source-map-explorer分析webpack打包的资源大小情况

Source map explorer使用源地图分析JavaScript包。这可以了解代码臃肿的来源,比如你经常发现打包后的代码文件比较大,但是有不知道该从哪点来分析,那么就可以用这个 Source map explorer 了。要将 Source map explorer 添加到 Create React App 项目中,请遵循以下步骤:npm install --save source-map-explorer或者,您可以使用 yarn:yarn add source-map-.

2021-12-08 10:59:23 770 2

原创 关于react类组件内函数获取不到this

1、定义2、使用3、报错4、原因当定义React组件时,extends React.Component时,不会将this继承下来。所以this是undefined.而ES6中的arrow function呢,默认在定义的时候会绑定this。使用this一般有两种做法。 直接使用箭头函数 在constructor中绑定。 class { constructor() { super(...arguments); ...

2021-11-24 17:18:47 1398

原创 git push时自动带上远程分支名

1.控制台输入:vi ~/.gitconfig2.把这段代码复制粘贴[alias] pushh = "!f() { if [ -z $1 ];then currBra=`git symbolic-ref -q --short HEAD`;else currBra=$1;fi;git push origin HEAD:refs/for/$currBra; }; f"3.推送时git pushh这段shell脚本的大致意思是,如果你写了指定的地址,那就push到指定地址,如果没写,那就...

2021-10-28 18:58:47 791

原创 升级react版本

1.用npm-check -u检查一下最新版本的包npm-check -u如果没安装npm-check,可以先安装npm install -g npm-check2.选择要更新的包如图我们要更新这两个包,按上下键移动箭头,按空格选择包,按回车更新3.运行项目,检查有没有报错15到16的迁移也同理,可以看这篇文章:技能get,React的优雅升级! - 袋鼠云dtstack - 博客园 (cnblogs.com)...

2021-10-21 11:40:01 2159

原创 npm包管理工具npm-check

Npm使用npm-check选择升级所有可更新包(全局+局部) + 项目单个依赖

2021-10-21 11:02:04 477

原创 一个项目同时安装两个版本的依赖

背景如项目中有一个2.0版本的ant库,我们不得已必须使用更高版本的ant方案我们可以使用npm的别名,安装不同版本的库如:npm install --save antd-mobile-v5@npm:antd-mobile@next他会和以前的版本共存{ "antd-mobile": "^2.3.2", "antd-mobile-v5": "npm:antd-mobile@next"}使用时引入即可import { Button } from 'antd-

2021-10-20 21:37:39 4157

原创 npm设置别名报错:Invalid dependency type requested: alias

原因:alias 低版本的npm不支持.必须要6.9.0版本以上方案:npm install -g npm或升级到指定版本npm -g install npm@版本号

2021-10-20 21:32:32 9117

原创 Swiper5&6使用方式以及一些坑

1.安装npm install swiper --save2.引入import Swiper, { Pagination, Navigation, Autoplay } from 'swiper' // js 模块import 'swiper/swiper-bundle.css' // css 模块Swiper.use([Pagination, Navigation, Autoplay])swiper只能按需引入css文件夹路径改变3.初始化 // eslint-di

2021-10-15 20:50:25 1542

转载 css改变鼠标样式

元素的样式上加cursor:值cursor其他取值 auto :标准光标 default :标准箭头 pointer, hand :手形光标 wait :等待光标 text :I形光标 vertical-text :水平I形光标 no-drop ...

2021-10-15 15:28:30 166

原创 swiper禁止手动滑动

在外层的容器上增加class="swiper-no-swiping"

2021-10-13 11:06:50 969

原创 CSS设置超出几行显示省略号

overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2; //行数/* autoprefixer: off */-webkit-box-orient: vertical;word-break:break-all; //英文折行

2021-10-12 22:26:55 977

原创 TS中的类

类的基本结构class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return "Hello, " + this.greeting; }}let greeter = new Greeter("world");如上声明一个Greeter类。这个类有3个成员:一个叫做gre..

2021-09-24 11:45:41 1421

原创 TS的枚举

官方定义使用枚举我们可以定义一些带名字的常量。 使用枚举可以清晰地表达意图或创建一组有区别的用例。 TypeScript支持数字的和基于字符串的枚举。枚举使用enum关键字来定义。理解:枚举是列举固定几个值,用于取值被限定在一定范围内的场景,比如一周只能有七天,颜色限定为红绿蓝等。直接定义变量的话的话可以随意定义,枚举只能使用你定义好的几个值例如你定义一个方法接收一个参数,这个参数如果是int型,别人在调用你这个方法时可以传1或2等任意数字,虽然你告诉了同事,只能传0或1,如果你把..

2021-09-22 14:41:25 14734

原创 JEST断言库(常用api)

Expect当你写测试,你经常需要检查值满足一定的条件。expect 可以访问一些“匹配器”来判断是否能够通过验证如:test('first use expect', function () { expect(1 + 1).toBe(2);});expect.extend我们可以expect.extend扩展自己编写的函数 如:expect.extend({ toNaN(received, argument) { if (isNaN(received)) { .

2021-09-13 19:38:12 1802 2

原创 JEST断言库(安装与demo)

1.新建文件夹2.在文件夹下npm install --save-dev jest或yarn add --dev jest3.新建package.json文件内容{ "scripts": { "test": "jest" }}4.让我们来测试一个简单两个数字相加的function,新建 Sum.jsfunction sum(a, b){ return a + b;}module.exports = sum;5.新建一个Sum.te

2021-09-13 17:10:32 912

原创 Git 提交代码每次输密码,干脆去掉吧~

每次push、pull都要输入密码,烦不胜烦。什么改成ssh,配置git config --global credential.helper store,之后依旧不行。那就干脆把密码去掉吧(最后的倔强)命令格式:ssh-keygen -p [-P old_passphrase] [-N new_passphrase] [-f keyfile]示例:以前提交会提示Enter passphrase for key '/Users/liming/.ssh/id_rsa.liming

2021-07-15 11:12:05 194

原创 【bug】 error in ./node_modules/watchpack/lib/chokidar.js

报错信息:error in ./node_modules/watchpack/lib/chokidar.jsSyntax Error: SyntaxError: /Users/wangji04/Desktop/code/baidu/bjh/fe-react/node_modules/watchpack/lib/chokidar.js: 'return' outside of function (4:1) 2 | try { 3 | module.exports = require(...

2021-05-27 11:02:24 3258 8

原创 node版本降级(mac)

我有一个项目,因为node版本太高,导致npm run dev报错。那么如何降级呢?(1)安装node版本管理模块nsudo npm install n -g下边步骤请根据自己需要选择(2)安装稳定版sudo n stable(3)安装最新版sudo n latest(4) 版本降级/升级sudo n 版本号//例如:sudo n 10.8.0...

2021-05-26 10:53:58 1138

原创 React的生命周期

1. 挂载卸载过程 1.1.constructor() 1.2.componentWillMount() 1.3.componentDidMount() 1.4.componentWillUnmount () 2. 更新过程 2.1. componentWillReceiveProps (nextProps) 2.2.shouldComponentUpdate(nextProps,nextState) 2.3.componentWillUpdate (nextProps,nex

2021-05-22 17:10:26 121

原创 useMemo和useCallback的区别 及使用场景

useMemo和useCallback接收的参数都是一样,第一个参数为回调 第二个参数为要依赖的数据共同作用:1.仅仅依赖数据发生变化, 才会重新计算结果,也就是起到缓存的作用。两者区别:1.useMemo计算结果是return回来的值, 主要用于 缓存计算结果的值 ,应用场景如: 需要 计算的状态2.useCallback计算结果是函数, 主要用于 缓存函数,应用场景如: 需要缓存的函数,因为函数式组件每次任何一个 state 的变化 整个组件 都会被重新刷新,一些函数是...

2021-05-17 14:50:00 2179

原创 《JS》前端面试题

JS相关基础~

2021-04-17 17:46:30 2078 1

原创 《webpack&打包构建&项目优化》前端面试题

前端面试题《webpack&打包构建&项目优化》~

2021-04-17 17:32:19 1818

原创 《网络&浏览器》前端面试题

前端面试题《网络&浏览器》~

2021-04-17 17:30:49 1384

原创 《vue》前端面试题

vue相关面试题~

2021-04-17 17:07:53 2127 2

空空如也

空空如也

TA创建的收藏夹 TA关注的收藏夹

TA关注的人

提示
确定要删除当前文章?
取消 删除