随笔分类 - react
摘要：当你希望组件“记住”某些信息，但又不想让这些信息 触发新的渲染 时，你可以使用 ref 。 const ref = useRef(0); useRef 返回一个这样的对象: { current: 0 // 你向 useRef 传入的值 } 与 state 一样，ref 在重新渲染之间由 React
阅读全文
摘要：在组件间共享状态 有时候你希望两个组件的状态始终同步更改。要实现这一点，可以将相关状态从这两个组件上移除，并把这些状态移到最近的父级组件，然后通过 props 将状态传递给这两个组件。这被称为“状态提升”，这是编写 React 代码时常做的事。 对 state 进行保留和重置 当你重新渲染一个组件时
阅读全文
摘要：同对象一样，当你想要更新存储于 state 中的数组时，你需要创建一个新的数组（或者创建一份已有数组的拷贝值），并使用新数组设置 state。 在没有 mutation 的前提下更新数组 每次要更新一个数组时，你需要把一个新的数组传入 state 的 setting 方法中。为此，你可以通过使用像
阅读全文
摘要：状态可以保存任何类型的 JavaScript 值，包括对象。但您不应直接更改 React 状态中保存的对象。相反，当您想要更新对象时，您需要创建一个新对象（或复制现有对象），然后设置状态以使用该副本。 将状态视为只读 将放入状态的任何 JavaScript 对象视为只读。 const [positi
阅读全文
摘要：export default function Counter() { const [number, setNumber] = useState(0); return ( <> <h1>{number}</h1> <button onClick={() => { setNumber(number +
阅读全文
摘要：如果你在组件的render方法或函数组件的体内直接调用fetch，那么每次组件渲染时都会执行fetch。这是不推荐的做法，因为React组件应该只负责UI的展示，而不应该直接处理数据获取逻辑。 确保你的fetch调用位于useEffect中，并且依赖项数组正确反映了你的依赖。如果fetch依赖于某些
阅读全文
摘要：table宽度无限增加 table组件在flex布局下宽度自动无限增加 表头和内容错位 关于加上scroll之后antd的table表头与表错位?你真地得考虑一下给table的column加上列宽!!!
阅读全文
摘要：当我们使用create-react-app脚手架创建一个react项目之后，等到项目开发完成想要打包部署时会发现，通过npm run build命令打包后的项目在浏览器端访问时会出现页面空白的情况。 解决方法： 此类问题一般有两种解决方法，其中第一种也是最常见的，当我们打开浏览器控制台时会发现，当首
阅读全文
摘要：setDataSource(prevData => prevData.map(item => { if (item.id id) { return res.data; } return item; }) );
阅读全文
摘要：// 设置奇偶行颜色 const setRowClassName = (record, index) => { let rowColor = index % 2 0 ? '' : styles.even; //判断单双行，赋予不同样式 return rowColor }; <Table rowKey
阅读全文
摘要：import React from 'react'; import './index.css'; import { Button, Form, Input } from 'antd'; const App = () => { const [form] = Form.useForm(); const
阅读全文
摘要：安装 React Router npm install react-router-dom 在入口文件 main.jsx 配置 首先在 react项目的入口文件index.js文件中，使用 BrowserRouter 将 包裹起来 import { StrictMode } from "react";
阅读全文
浙公网安备 33010602011771号