随笔分类 - React
摘要：// 点击空白处日历切换 useEffect( function () { document.addEventListener('click', clickBody); return function () { document.removeEventListener('click', clickB
阅读全文
摘要：事件分析 事件区分核心：使用onMouseDown、onMouseUp和定时器来区分单击事件与长按事件 按下时设置长按事件定时器（并加入长按回调），并记录当前时间戳， 松开事件中如果当前时间戳差值小于定时器则执行单击回调，并清除定时器，如果大于定时器事件，则按下事件中定时器的长按回调已经执行，事件末
阅读全文
摘要：官网 createPortal(children, domNode, key?) import { createPortal } from 'react-dom'; // ... <div> <p>这个子节点被放置在父节点 div 中。</p> {createPortal( <p>这个子节点被放置在
阅读全文
摘要：核心思路：dom渲染与key值有关系，如果想实现上述需求，则需要关注改变前后的循环项的key值是否发生改变 currentCabinet?.map((item, index) => <BaseInfo key={`currentCabinet${item?.ciId}`} sceneKey={sce
阅读全文
摘要：正确的写法可以让你拥有更加灵活多变的样式： <Drawer title={<div><Icontype="arrow-left"style={{ marginRight: "5px" }}/>{editState=="create"?"加油":"前进"}</div>} />
阅读全文
摘要：const column=[ { key: "1", title: ( <> <span style={{ marginLeft: "4px" }}>123</span> </> ), }, { key: "2", title: ( <Tooltip title={longTitle}>{longT
阅读全文
摘要：Hook 规则 Hook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。 Hook 本质就是 JavaScript 函数，但是在使用它时需要遵循两条规则。我们提供了一个 linter 插件来强制执行这些规则： 只在最顶层
阅读全文
摘要：https://zh-hans.reactjs.org/warnings/invalid-hook-call-warning.html 你能到这个页面很可能是因为你看到了以下错误信息： Hooks can only be called inside the body of a function co
阅读全文
摘要：需要加上key值，使每个dom不一样 报错： {jigui.map((item, index) => { return <p>{item?.name}</p>; })} 不会报错： {jigui.map((item, index) => { return <p key={index}>{item?.
阅读全文
摘要：const width = window.innerWidth; const height = window.innerHeight;
阅读全文
摘要：<div className="innerImg" style={{ backgroundImage: 'url(' + innerKing + ')', backgroundPositionX: 80, backgroundPositionY: 20, }} ></div>
阅读全文
摘要：className={`titleBox ${index == 2 ? 'leftFloat' : ''}`} <div className={text < 50 ? 'redText' : 'greenText'}>{text}%</div> <span className="lineColor"
阅读全文
摘要：尝试使用useEffect 赋值，页面即是多渲染一次，但是可以达到想要的效果 useEffect(() => { setActive(Obnames[0]); }, [Obnames]);
阅读全文
摘要：一劳永逸解决第一次渲染为空渲染问题，方法头部判断后return null if (data.length == 0) { return null; } 或者array.isArray（） const AAA=useMemo(()=>{return },[data])//常用useMemo进行初始化赋
阅读全文
摘要：/* * @Author: 作者 * @Date: 2022-07-05 17:16:05 * @LastEditors: 最后修改人 * @LastEditTime: 2022-07-06 14:39:27 * @Description: 描述 */ import React, { useStat
阅读全文
摘要：如果onclick事件有参数则点击事件应写成 <Button type="primary" onClick={() => updateItem(record)}> 编辑 </Button> 如果写成下面这种形式会默认执行并且会报相关错误 <Button type="primary" onClick=
阅读全文
摘要：1. 组件 render 渲染了一个对象, 当 state 已确定更新但视图未更新 2. 组件 render 渲染了一个列表, 当 state 改变视图更新异常 3. A 和 B 子组件共用一个父组件 state, 此时点击子组件 A 按钮更新了父组件 state, 但是子组件 B 视图不更新 4.
阅读全文
摘要：const newList = list.slice(); 不要用等号赋值 （一些引用类型直接复制不会引起页面的重新渲染，所以尽可能使用数组方法完成业务需求） 原因: 对象数组是引用方式 , 对于 react 来说它的值都是地址 (涉及到 tree diff)，因为没有被重新赋值 (地址没有改变)，
阅读全文
摘要：1、setState() 2、props发生变化 3、forceUpdate()
阅读全文
摘要：<Input style={{ marginTop: '10px', marginRight: '10px', width: '200px' }} onChange={changeInputValue} /> const changeInputValue = (e) => { //e：改变的值都可以
阅读全文
浙公网安备 33010602011771号