- 博客(45)
- 资源 (2)
- 收藏
- 关注
RSS订阅原创 【React】如何使antd禁用状态的表单输入组件响应点击事件？
最近遇到一个需求，需要在组件中，设置属性disabled为true，使textarea响应点击事件，但直接绑定onClick并不会在禁用状态下被响应。
2024-02-07 17:23:15
1084
原创 【nextjs】为特定的组件关闭SSR（next中安装canvas失败的解决方法）
我有一个在next中制图的应用，引用了canvas，但是node-canvas怎么样都安装不下来，各种关于node-gyp的编译报错。所以我只能弃用node-canvas库。这个页不能进行ssr了，只能启用客户端渲染canvas。使用dynamicimport引入所需的组件。......
2022-07-29 12:28:47
1181
1
原创 【antd】解决Table组件改变dataSource没有重新渲染问题记录
维护一个state，类型为tree结构，Table组件中dataSource要绑定这个树的cur指针指向的某个节点下的子节点数组。当我准备删除某个节点时，却发现视图上没有变化。我最开始怀疑是react没有检测到state变化，所以没有rerender，自己自制了forceupdate方法，见我另一篇博文：《函数组件强制渲染 模仿forceUpdate》，使用forceUpdate确实能强制令视图更新。且，我在视图层打印dataSource绑定的数据也能发现，确实是更新，数据有变化，但是Table组件就是没有
2022-06-30 14:52:15
9741
原创 【CCF - 202009-1】称检测点查询 c语言
题目背景2020 年 6 月 8 日，国务院联防联控机制发布《关于加快推进新冠病毒核酸检测的实施意见》，提出对“密切接触者”等八类重点人群“应检尽检”，其他人群“愿检尽检”。问题描述某市设有n个核酸检测点，编号从1到n，其中i号检测点的位置可以表示为一个平面整数坐标(xi,yi)。为方便预约核酸检测，请根据市民所在位置(X,Y)，查询距其最近的三个检测点。多个检测点距离相同时，编号较小的视为更近。输入格式输入共n+1行。第一行包含用空格分隔的三个整数n、.........
2022-03-24 16:17:30
431
原创 【CCF CSP202112-1】序列查询 时间0ms 空间2.75MB 解法
题目背景西西艾弗岛的购物中心里店铺林立，商品琳琅满目。为了帮助游客根据自己的预算快速选择心仪的商品，IT 部门决定研发一套商品检索系统，支持对任意给定的预算x，查询在该预算范围内（≤x）价格最高的商品。如果没有商品符合该预算要求，便向游客推荐可以免费领取的西西艾弗岛定制纪念品。假设购物中心里有n件商品，价格从低到高依次为A1,A2⋯An，则根据预算x检索商品的过程可以抽象为如下序列查询问题。题目描述A=[A0,A1,A2,⋯,An]是一个由n+1个[0,N)范围内整数组......
2022-03-21 11:49:21
156
原创 【mobx】toJS之后依赖值没变，useEffect多次调用的问题
父组件中传递引用类型的props，在子组件中即使实际上的值没有改变也会触发。因为useEffect的依赖值如果为引用类型，react对其进行浅比较，浅比较只是对比是否为同一个对象的引用，将会在每一次render中被触发。父组件 <KonvaCanvas // ... stepInfo={toJS(store.stepInfo)} />子组件 useEffect(() => { console.log('
2022-01-24 14:38:56
2286
原创 【antd】Instance created by `useForm` is not connected to any Form element.Forget to pass `form` prop?
Instance created by useForm is not connected to any Form element.Forget to pass form prop?这个问题通常会在Modal里的Form种出现，这是因为在调用form.setFieldsValue(detail);时，form还未被关联到<Form>上解决方法： 给modal组件添加forceRender属性，使其强制渲染 <Modal // .... forceRender >
2022-01-22 18:04:35
2937
1
原创 ts编译报错 “platform”已弃用
navigator.platform 被废弃了，不推荐再用，详见Navigator.platform这里用userAgentData.platform代替：NavigatorUAData const userAgentData = navigator.userAgentData; const { platform } = userAgentData;
2021-12-06 15:52:06
3330
1
原创 react useRef ts 编译报错 不能将类型“MutableRefObject＜HTMLDivElement | undefined＞”分配给类型“LegacyRef＜HTMLDivEleme
不能将类型“MutableRefObject<HTMLDivElement | undefined>”分配给类型“LegacyRef | undefined”。1.没赋初值2. useRef里面没写对类型正确的列子···tsxconst canvasRef = useRef(null)/// …return <canvas ref={canvasRef }>···...
2021-11-26 20:27:43
12899
4
原创 解决css无法解析远程字体
指明format就ok，注意不都是ttf，需要写个map进行映射 font-family: '字体名称'; src: url('远程地址') format('trueType');
2021-11-26 18:54:12
300
原创 cp 命令 -R 复制目录，有没有星号*的区别
在用gulp生成文件时，需要用到cp命令，需求是把__config/img/下面的文件复制到dev/img下，但现在没有dev目录，mkdir两次有点麻烦，直接cp("-R", "__config/img/*", "dev/img/")又不生效加星号cp("-R", "__config/img/*", 'dev') 复制整个img目录下的文件到dev下，不包含img目录不加星号cp("-R", "__config/img/", 'dev') 复制整个img目录到dev下，包含img目录...
2021-04-07 15:30:41
3066
原创 解决windows安装sentry-cli失败的问题
踩了一天的坑才装上，我太难了，先看下安装成功的截图注意：windows拿npm、yarn全局安装都不行，装上了执行命令行也会报错，可能跟node版本有关，所以这里要用scoop安装！！windows先去安装scoop，这里一定要在powershell里执行Set-ExecutionPolicy RemoteSigned -scope CurrentUseriwr -useb get.scoop.sh | iex安装scoop可能会因为网络原因失败，如果失败把C:\Users\Administ
2021-03-17 16:34:13
7210
3
原创 解决umi、nginx部署路由失效问题
不用hash解决，注意只能有一份配置文件，config/config.ts和.umirc.ts各选其一// .umirc.tsimport { defineConfig } from 'umi';import routes from './routes';export default defineConfig({ nodeModulesTransform: { type: 'none', }, alias: { '@': '/src/', }, exportSt
2021-03-15 19:17:58
2119
原创 react hooks setInterval 踩坑记录
问题描述做一个验证码发送倒计时的组件，其倒数逻辑如下：const [time,setTime]=useState(60)// .... const send = () => { timer = setInterval(() => { if (seconds > 1) { setTime(time-1) } else { clearInterval(timer); setTime(
2021-03-11 17:23:05
427
原创 hexo markdown highlight.js 代码高亮失效问题记录
问题描述按照hexo文档配置highlight: enable: true auto_detect: false line_number: true tab_replace: ' ' wrap: true hljs: falseprismjs: enable: false以ssr形式中直接渲染发现无效，改成csr渲染就行。在模板文件中添加<link rel="stylesheet" href="//cdn.bootcss.com/highlight.js/9.
2021-03-02 11:30:40
2317
2
原创 解决typescript webpack 设置alias不生效的问题
tsconfig.json特别注意includes和exclude！！ "paths": { "@/*": ["./app/*"], } .... "exclude": ["node_modules", "dist", "src", ], "includes": ["./app/**/*", "./chrome/**/*", ]webpa...
2020-04-14 15:18:29
7923
1
原创 解决chrome扩展发通知不显示的问题
首先，要注意，使用这个api在background.js中，不是在content-script下。然后在content-script中要通过chrome.runtime.sendMessage 这个api来调起。在background.js中要监听sendMessage事件：chrome.runtime.onMessage.addListener( (request, sender, se...
2020-04-09 18:01:15
3634
原创 viewport动态适配移动设备任意宽度
应用此段代码需注意x5内核浏览器，比如微信内要再写一套，详见这里：JS 控制VIEWPORT在微信上正常显示viewport只在移动端设备生效，所以不适配pc原理viewport里的缩放比例：initial-scale。也就是ui稿大小/设备屏幕宽度，再按照比例缩放。...
2020-03-03 18:44:37
354
原创 消除ul ol前面的间距
通用方案 ul,ol { padding-inline-start: 0;-webkit-padding-start: 0;}某些手机浏览器内核没有更新，加了上面的代码可能还不生效，直接拿手机连chrome调试看看吧 chrome://inspect/#devices...
2020-02-13 16:01:11
708
原创 vscode所有插件失效解决log
症状更换开发环境，下的2020最新版本，v1.41。安装所有插件都不生效，suggestion也不显示，就甭提别的了。怀疑是自己配置有毛病，copy原来机子上的setting.json也不行，怀疑是插件之间有冲突，最后删的就剩react snippets也没有suggestion。google各种也不行，折腾了两天搞这个问题。解决方法看了github issue发现新版本存在这个问题。遂卸载...
2020-01-12 15:55:14
4998
原创 ES6 标签模板字面量
前言最近在读《你不知道的js》下册，看到了关于标签模板字面量的内容，之前没遇见过，所以不懂就要写博客记录下来啊~基础示例function foo(strings,...values){ console.log(strings) console.log(values)}const desc='awesome'foo`Everything is ${desc}...
2020-01-12 15:46:38
2155
1
原创 Taro生成二维码及保存失败问题记录
生成使用weapp-qrcode库，调用方法：&lt;Canvas style='width: 200px; height: 200px;' canvasId='myQrcode' /&gt;import { qrcode as drawQrcode } from '../../utils'drawQrcode({ width: 200, height: 200, canvasId: '...
2019-02-14 10:28:16
2547
1
原创 关于prototype你需要知道的几个问题
为了良好的代码高亮阅读体验，建议您查看github原文。前言prototype是js面向对象的一个重要机制，于是总结了以下几个问题，理解起来会比较有针对性。1. prototype 和 __proto__ 的关系是什么？prototype是只有函数才会有的属性；而__proto__是所有对象都有的属性。几乎所有的函数都有一个prototype属性，prototype上挂...
2018-08-03 11:37:24
2917
原创 es6超好用的语法糖Decorator
Decorator（修饰器/装饰器）是es6提出的语法糖，用于修改类的行为。不过目前主流浏览器都没有很好的支持，我们需要用babel来转换为浏览器能识别的语言。在这篇文章中将介绍decorator的基础用法和一些应用实例。1.修饰类(1) 基础用法@testableclass MyClass{}function testable(target){ target...
2018-07-29 17:09:28
392
原创 超经典面试题：用多种方法实现圣杯布局和双飞翼布局
0. 开始正文之前的自我吐槽圣杯布局和双飞翼布局一直是前端面试的高频考点，然而本人对布局和css这方面实在不擅长==，每次被面试官问到css相关的问题，都含含糊糊；到了后面自己闲麻烦直接说"我不太懂css!"。然而总被强硬的怼回来，“你不会css你还是前端吗！”。 然而程序员的世界中“懂”的意思不是等于“精通”吗？=。=好了正文开始。。1. 圣杯布局1.简单介绍...
2018-07-18 15:15:06
676
原创 taro初探：使用taro构建微信小程序基础教程
前言由于微信小程序在开发上不能安装npm依赖，和开发流程上也饱受诟病；Taro 是由京东·凹凸实验室(aotu.io)倾力打造的 多端开发解决方案，在本篇文章中主要介绍了使用taro搭建微信小程序的一些步骤和一个简单demo的实现。安装先全局安装@tarojs/cli$ npm install -g @tarojs/cli$ yarn global add @tarojs...
2018-07-17 17:13:28
6060
7
原创 论git commit工作流程的标准姿势
前言之前我写过一篇有关于git提交的文档《用gitmoji来提交你的git commit吧》，然而在实际上应用并不是很方便，大多情况得翻阅gitmoji对照表来写commit，且并不规范，仅仅适用于自己开发的项目，放到团队上commit可读性不高。最近翻阅了一篇文章《你可能会忽略的 Git 提交规范》，才知道自己之前写的commit非常随意，在项目初期，写的还蛮正规的：然而之后懒了，前...
2018-07-12 22:37:30
724
原创 node检测端口是否被占用
需求检查服务端口是否被占用，占用则递归查找未被占用的端口号，找到返回端口号。node apinet.Server 类net.createServer([options][, connectionListener])创建一个新的TCP或IPC服务。server.close([callback])停止 server接受建立新的connections并保持已经...
2018-07-05 14:55:21
6045
3
原创 在react中如何实现扫码枪输入
触发原理原理就是监听键盘输入，比如扫一个为6970596130126的69条形码，用扫码枪扫一下会在光标位置依次输出：697059613026但这不是完整的，所以需要写一个函数scanEvent来整理收集到的每个编号。let code = '';let lastTime, nextTime, lastCode, nextCod...
2018-07-03 14:03:07
2404
1
原创 2018年6月前端必须star的github项目
这里面图片有的上传会失败，为了良好的阅读体验，移步到本人的github地址查看原文文件处理ReLaXed – 使用web技术创建PDF文档ReLaXed是一种使用HTML或Pug（HTML的简写）交互式创建PDF文档的工具。它允许使用CSS和JavaScript定义复杂的布局，同时将内容写入接近Markdown或LaTeX的友好，最简单的语法中。vivid – 一个JavaScri...
2018-07-02 09:38:44
840
原创 解决使用axios发送json后台接收不到的问题
问题描述按照axios官网例子发起请求传递json，后台接受到的数据为空，一直卡在options阶段。尝试的方法开始以为是接口有问题，使用postman测试下，一切正常，百思不得其解，看了好多issue也解决不了，加了headers:{'content-type':'application/json'}也没用。官网上是说，传json就按application/json进行处理，...
2018-06-26 15:14:33
10719
4
原创 react如何将组件内部的方法暴露给外部
最近在项目中遇到一个问题，就是需要在类的外部调用操作类内部的方法。举个例子，我有一个Toast组件，在外部需要调用它的show方法来控制他的显隐状态。 之前我的写法是写一个静态类方法，然后在constructor中去修改它的作用域，代码如下：// @flowimport React from 'react';import './style.less';type Props={...
2018-06-26 11:49:18
13687
1
原创 eslint中添加flow 报错 "Cannot read property 'type' of undefined" 解决方法
配置安装 eslint-plugin-flowtypenpm install eslint --save-devnpm install babel-eslint --save-devnpm install eslint-plugin-flowtype --save-dev配置.eslintrc{ "parser": "babel-eslint", "plugins"...
2018-06-12 15:30:40
11470
原创 详解generator(三)——处理thunk
thunkjs中的thunk是指一个用于调用另外一个函数的函数，没有任何参数。也可以说，使用一个函数定义封装函数调用，包括需要的任何参数，来定义这个调用的执行，那么这个封装函数就是一个thunk。如：function foo(x,y){ return x+y}function bar(){ foo(1,2)}console.log(bar()) // 3...
2018-05-09 09:01:18
346
原创 详解generator(二)——异步、委托和并发
异步迭代生成器先看一个例子，用于控制异步流程的暂停阻塞function foo(url){ ajax(`api/${url}`,(err,data)=&gt;{ if(err){ it.throw(err) // 抛出一个错误 }else{ it.next(data) // 得到了data再恢复*m...
2018-05-08 08:58:00
417
原创 2018年4月前端必须star的github项目
CLI相关ink – 把react应用于命令行应用程序consola – 优雅的控制台记录器hyper – 在web上显示终端官网const consola = require('consola')// See types section for all available typesconsola.start('Starting build')consola.su...
2018-05-03 09:24:52
311
原创 【总结】Cookie、session和localStorage、以及sessionStorage之间的区别
Cookiecookie是由服务器发送到浏览器的小量信息，浏览器会将cookie保存下来，下次请求同一网站时会将cookie发送给服务器。sessionsession是指一个用户与交互进行通信的时间间隔，比如登录到登出的这一过程所需要的时间。具体到web中就是用户浏览某个网站时，从进入网站到关闭浏览器所经过的这段时间。注意!!session是一个时间概念，并非客观存在的东西。当...
2018-04-23 14:41:50
380
原创 页面从输入URL到展现发生了什么
1.DNS解析我们在浏览器上输入地址时，如www.qq.com，需要把这个地址解析成ip地址，其中就需要dns解析。 DNS(Domain Name System)是域名系统的英文缩写，他的服务是用来将主机名和域名转换为ip地址的工作。dns域名工作流程浏览器在查找这个服务器ip的时候，首先寻找本地hosts文件是否有这个地址映射关系，如果有就先调用这个ip地址映射...
2018-04-18 13:48:48
2798
敏捷开发的艺术
2018-10-04
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人