随笔分类 - React
摘要：需要加上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：改变的值都可以
阅读全文
摘要：将组件中所用数据和方法通过props传给子UI组件，子UI组件调用这些数据和方法完成页面渲染（业务逻辑层的构造函数不变） TodtListUI.js import React, { Component } from 'react' import {Input,Button,List} from 'a
阅读全文
摘要：export const getListAction=(data)=>({ type:GET_LIST, data }) const action=getListAction(data) 调用该方法，取到的是括号内部的值 所以该写法可看作()=>{return{}} 首先这里用的时ES6的箭头函数
阅读全文
摘要：报错的意思应该是因为必须在组件挂载后订阅 componentDidMount(){ // store.subscribe(this.storeChange) //订阅 }
阅读全文
