react
mytac
hello,这里小白一枚,请多多指教~~
展开
-
【nextjs】为特定的组件关闭SSR(next中安装canvas失败的解决方法)
我有一个在next中制图的应用,引用了canvas,但是node-canvas怎么样都安装不下来,各种关于node-gyp的编译报错。所以我只能弃用node-canvas库。这个页不能进行ssr了,只能启用客户端渲染canvas。使用dynamicimport引入所需的组件。......原创 2022-07-29 12:28:47 · 1148 阅读 · 1 评论 -
【antd】解决Table组件改变dataSource没有重新渲染问题记录
维护一个state,类型为tree结构,Table组件中dataSource要绑定这个树的cur指针指向的某个节点下的子节点数组。当我准备删除某个节点时,却发现视图上没有变化。我最开始怀疑是react没有检测到state变化,所以没有rerender,自己自制了forceupdate方法,见我另一篇博文:《函数组件强制渲染 模仿forceUpdate》,使用forceUpdate确实能强制令视图更新。且,我在视图层打印dataSource绑定的数据也能发现,确实是更新,数据有变化,但是Table组件就是没有原创 2022-06-30 14:52:15 · 9518 阅读 · 0 评论 -
【React】函数组件强制渲染 模仿forceUpdate
函数组件强制渲染 模仿forceUpdate原创 2022-06-29 11:24:18 · 3842 阅读 · 1 评论 -
【mobx】toJS之后依赖值没变,useEffect多次调用的问题
父组件中传递引用类型的props,在子组件中即使实际上的值没有改变也会触发。因为useEffect的依赖值如果为引用类型,react对其进行浅比较,浅比较只是对比是否为同一个对象的引用,将会在每一次render中被触发。父组件 <KonvaCanvas // ... stepInfo={toJS(store.stepInfo)} />子组件 useEffect(() => { console.log('原创 2022-01-24 14:38:56 · 2259 阅读 · 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 评论 -
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 · 12689 阅读 · 4 评论 -
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 评论 -
在react中如何实现扫码枪输入
触发原理原理就是监听键盘输入,比如扫一个为6970596130126的69条形码,用扫码枪扫一下会在光标位置依次输出:697059613026但这不是完整的,所以需要写一个函数scanEvent来整理收集到的每个编号。let code = '';let lastTime, nextTime, lastCode, nextCod...原创 2018-07-03 14:03:07 · 2382 阅读 · 1 评论 -
react如何将组件内部的方法暴露给外部
最近在项目中遇到一个问题,就是需要在类的外部调用操作类内部的方法。举个例子,我有一个Toast组件,在外部需要调用它的show方法来控制他的显隐状态。 之前我的写法是写一个静态类方法,然后在constructor中去修改它的作用域,代码如下:// @flowimport React from 'react';import './style.less';type Props={...原创 2018-06-26 11:49:18 · 13639 阅读 · 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 · 11456 阅读 · 0 评论 -
【译】react refs and dom(v16.3.1)
refs提供了可以在render方法中访问dom节点和创建的react元素的方法。为了良好的阅读体验,请查看github原文在典型的react数据流中,props是父子组件通信的唯一方式,要修改子组件,需要新props重新渲染。然而有一些情况需要在数据流外修改子组件。何时使用Refs管理focus,文本选择和媒体播放触发命令式动画集成第三方dom库避免过...翻译 2018-04-11 09:22:03 · 167 阅读 · 0 评论 -
虚拟dom的原理
前言react的virtual dom非常强大,本篇文章将会简单讨论virtual dom的实现思路~具体步骤如下:用js对象构造一个虚拟的dom树,插入到文档中状态变更时,记录新树和旧树的差异把上面的差异构建到真正的dom中1.用js对象构建一个dom树一个dom节点包含节点类型(tagName),所有属性(props,是一个对象),它的子节点(children一个数...原创 2018-04-03 15:30:38 · 5368 阅读 · 0 评论 -
【译】最新版本react组件生命周期详解(v16.3.1)
16版本的react对组件的生命周期函数进行了一些修改,在每个react组件中都有以下几个生命周期方法~我们需要在不同阶段进行讨论。为了良好的阅读体验,请查看github原文组件生命周期概述1.初始化在组件初始化阶段会执行 1. constructor 2. static getDerivedStateFromProps() 3. componentWillMount()...翻译 2018-04-09 09:43:30 · 8707 阅读 · 0 评论