问题记录
mytac
hello,这里小白一枚,请多多指教~~
展开
-
【React】如何使antd禁用状态的表单输入组件响应点击事件?
最近遇到一个需求,需要在组件中,设置属性disabled为true,使textarea响应点击事件,但直接绑定onClick并不会在禁用状态下被响应。原创 2024-02-07 17:23:15 · 1040 阅读 · 0 评论 -
【nextjs】为特定的组件关闭SSR(next中安装canvas失败的解决方法)
我有一个在next中制图的应用,引用了canvas,但是node-canvas怎么样都安装不下来,各种关于node-gyp的编译报错。所以我只能弃用node-canvas库。这个页不能进行ssr了,只能启用客户端渲染canvas。使用dynamicimport引入所需的组件。......原创 2022-07-29 12:28:47 · 1149 阅读 · 1 评论 -
【antd】解决Table组件改变dataSource没有重新渲染问题记录
维护一个state,类型为tree结构,Table组件中dataSource要绑定这个树的cur指针指向的某个节点下的子节点数组。当我准备删除某个节点时,却发现视图上没有变化。我最开始怀疑是react没有检测到state变化,所以没有rerender,自己自制了forceupdate方法,见我另一篇博文:《函数组件强制渲染 模仿forceUpdate》,使用forceUpdate确实能强制令视图更新。且,我在视图层打印dataSource绑定的数据也能发现,确实是更新,数据有变化,但是Table组件就是没有原创 2022-06-30 14:52:15 · 9531 阅读 · 0 评论 -
【React】函数组件强制渲染 模仿forceUpdate
函数组件强制渲染 模仿forceUpdate原创 2022-06-29 11:24:18 · 3848 阅读 · 1 评论 -
【mobx】toJS之后依赖值没变,useEffect多次调用的问题
父组件中传递引用类型的props,在子组件中即使实际上的值没有改变也会触发。因为useEffect的依赖值如果为引用类型,react对其进行浅比较,浅比较只是对比是否为同一个对象的引用,将会在每一次render中被触发。父组件 <KonvaCanvas // ... stepInfo={toJS(store.stepInfo)} />子组件 useEffect(() => { console.log('原创 2022-01-24 14:38:56 · 2263 阅读 · 0 评论 -
【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 · 2925 阅读 · 1 评论 -
ts编译报错 “platform”已弃用
navigator.platform 被废弃了,不推荐再用,详见Navigator.platform这里用userAgentData.platform代替:NavigatorUAData const userAgentData = navigator.userAgentData; const { platform } = userAgentData;原创 2021-12-06 15:52:06 · 3241 阅读 · 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 · 12703 阅读 · 4 评论 -
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 · 3045 阅读 · 0 评论 -
解决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 · 7174 阅读 · 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 · 2100 阅读 · 0 评论 -
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 · 413 阅读 · 0 评论 -
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 · 2284 阅读 · 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 · 7869 阅读 · 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 · 3580 阅读 · 0 评论 -
viewport动态适配移动设备任意宽度
应用此段代码需注意x5内核浏览器,比如微信内要再写一套,详见这里:JS 控制VIEWPORT在微信上正常显示viewport只在移动端设备生效,所以不适配pc原理viewport里的缩放比例:initial-scale。也就是ui稿大小/设备屏幕宽度,再按照比例缩放。...原创 2020-03-03 18:44:37 · 348 阅读 · 0 评论 -
消除ul ol前面的间距
通用方案 ul,ol { padding-inline-start: 0;-webkit-padding-start: 0;}某些手机浏览器内核没有更新,加了上面的代码可能还不生效,直接拿手机连chrome调试看看吧 chrome://inspect/#devices...原创 2020-02-13 16:01:11 · 695 阅读 · 0 评论 -
vscode所有插件失效解决log
症状更换开发环境,下的2020最新版本,v1.41。安装所有插件都不生效,suggestion也不显示,就甭提别的了。怀疑是自己配置有毛病,copy原来机子上的setting.json也不行,怀疑是插件之间有冲突,最后删的就剩react snippets也没有suggestion。google各种也不行,折腾了两天搞这个问题。解决方法看了github issue发现新版本存在这个问题。遂卸载...原创 2020-01-12 15:55:14 · 4966 阅读 · 0 评论 -
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 · 2532 阅读 · 1 评论 -
解决使用axios发送json后台接收不到的问题
问题描述按照axios官网例子发起请求传递json,后台接受到的数据为空,一直卡在options阶段。尝试的方法开始以为是接口有问题,使用postman测试下,一切正常,百思不得其解,看了好多issue也解决不了,加了headers:{'content-type':'application/json'}也没用。官网上是说,传json就按application/json进行处理,...原创 2018-06-26 15:14:33 · 10692 阅读 · 4 评论 -
react如何将组件内部的方法暴露给外部
最近在项目中遇到一个问题,就是需要在类的外部调用操作类内部的方法。举个例子,我有一个Toast组件,在外部需要调用它的show方法来控制他的显隐状态。 之前我的写法是写一个静态类方法,然后在constructor中去修改它的作用域,代码如下:// @flowimport React from 'react';import './style.less';type Props={...原创 2018-06-26 11:49:18 · 13643 阅读 · 1 评论