推荐最新

React 组件状态管理 useContext 的 Provider 怎么传递额外参数？

现在想要传递一个初始化的表单数据到 "useState" 里而且表单里的字段是通过接口出来的，但现在根据文档参数被 "{}" 限制了，想问下额外的参数要怎么传递？"" export function FormProvider({ children } : { children: React.ReactNode }) { const [form, setFrom] = useState({}) return ( {children} ); }

浏览量270

脑袋困掉惹

React 有没有全局的状态变量？

就是想实现一个保存登录状态的变量，登录成功后为 "true" 然后其它接口请求的时候如果登录失效了就 "false", 我看了下 "useContext" 是用于组件之间的通信，那请求的话只是一个普通方法并不是一个组件，所以请教下

浏览量335

一只臭美的Doggg

useEffect 如何监控 useRef.current 里面的值发生变化(useRef不绑定dom)?

useEffect 如何监控 useRef.current 里面的值发生变化(useRef不绑定dom)? function handleWheel(e: TKWheelEvent) { if (e.evt.ctrlKey) return e.evt.preventDefault() const direction = e.evt.deltaY > 0 ? -1 : 1 const stage = e.target.getStage()! const oldScale = stage.scaleX() const pointer = stage.getPointerPosition()! const mousePointTo = { x: pointer.x / oldScale - stage.x() / oldScale, y: pointer.y / oldScale - stage.y() / oldScale, } const { MaxScale, MinScale } = ScaleRef.current const newScale = direction > 0 ? oldScale > MaxScale ? oldScale : oldScale * ScaleBy : oldScale { console.log(ScaleRef.current.newScale) }, [ScaleRef.current]) // 这样不打印 }, [ScaleRef]) // 这样不打印 }, [ScaleRef.current.newScale]) // 这样不打印其实我是想让 "ScaleRef.current.newScale"发生变化的时候传给子组件,让子组件重新渲染,但是发现"ScaleRef.current.newScale"这玩意监听不到它的变化

浏览量206

瞳孔放大黑洞

ant design react validateTrigger失效怎么办？

使用ant design react 通过 Form.useForm 对表单数据域进行交互。这个里面Form.item里面包的组件是个包了两层的父子组件，然后使用validateTrigger的时候我发现没有效果，只能默认设置onchange，想设置成onBlur没有效果，Form.Item属性、rule里面属性我都加了validateTrigger为onBlur，Form.Item的name属性也加了，都没有效果，请问怎么处理？加了validateTrigger为onBlur**

浏览量194

CO_co

React：如何使用useCallback以避免全量更新?

react 如何使用useCallback 避免全量更新? 在子组件的事件中使用useCallback "fd3e60779771043277351a5329d1868.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241014/a272b1e2944e4a8b10be14abc41ebf08.png) 父组件 list.map 创建了子组件, 子组件触发事件导致父组件的 list 发生变更, 于是组件全部发生了变化这个过程中只有其中一个子组件发生了改变,所以我使用了 memo 包裹了一下但是传递的事件函数会重复创建,导致子组件全量更新我应该如何使用useCallback 来实现顶点更新? onDrop(name)} onDragMove={(e: TKDragEvent) => onDragMove(e, index)} onMouseOver={() => dispatch(setSelectPointKey(name))} // 注释这样写会报错 // onDragEnd={useCallback(() => onDrop(name), [])} // onDragMove={useCallback((e: TKDragEvent) => onDragMove(e, index), [index])} // onMouseOver={useCallback(() => dispatch(setSelectPointKey(name)), [])} /> "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241014/ea835fbd390ee932391197de457116e2.png) "image.png" (https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241014/40d6574cb449602f487c586048031e73.png)

浏览量147

一只tomatoo

antd里面的Table组件，dataSource如果涉及children无法筛选里面的数据？

排序的话，实现起来挺简单，直接在sorter方法里面判断就行，发现筛选onFilter方法里面判断行不通，办法是有，我感觉很复杂，需要跟Table里面的onchange配合使用，得写一堆逻辑，还容易出问题，请问有其它更简单方法实现吗？比如直接在onFilter方法里面实现就行的 https://wmprod.oss-cn-shanghai.aliyuncs.com/c/user/20241012/27a8c143abc07058796e43e615e4e4a2.png onFilter方法是一个布尔值,如果在children里面判断发现行不通比如： onFilter: (value, record) => { if(record.children){ //xxx } } demo const { createRoot } = ReactDOM; const { Space, Switch, Table } = antd; const { useState } = React;; const columns = [ { title: 'Name', dataIndex: 'name', key: 'name', filters: [ { text: 'test01', value: 'test01', },{ text: 'test02', value: 'test02', }, { text: 'test10', value: 'test10', },{ text: 'test21', value: 'test21', }, ], onFilter: (value: string, record) => record.name === value }, { title: 'Age', dataIndex: 'age', key: 'age', width: '12%', }, { title: 'Address', dataIndex: 'address', width: '30%', key: 'address', }, ]; const data = [ { key: 1, name: '测试A', age: 60, address: 'New York No. 1 Lake Park', children: [ { key: 11, name: 'test02', age: 42, address: 'New York No. 2 Lake Park', },{ key: 12, name: 'test01', age: 22, address: 'New York No. 2 Lake Park', }, ], }, { key: 2, name: '测试A_1', age: 29, address: 'Sidney No. 1 Lake Park', }, { key: 3, name: '测试B', age: 32, address: 'Sidney No. 1 Lake Park', children: [ { key: 13, name: 'test21', age: 25, address: 'New York No. 2 Lake Park', },{ key: 14, name: 'test01', age: 19, address: 'New York No. 2 Lake Park', },{ key: 15, name: 'test10', age: 19, address: 'New York No. 2 Lake Park', }, ], },{ key: 4, name: '测试B_1', age: 29, address: 'Sidney No. 1 Lake Park', }, ]; const App = () => { return ( ); }; const ComponentDemo = App; createRoot(mountNode).render();

浏览量146

颜如玉你信不信

React Hooks vs Class Components: Why the Shift?

为什么react官方不再推荐class component而是选择拥抱Hooks 希望能得到一些文章用以帮助对其进一步的理解和学习

浏览量149

小飞侠007

React 的 Hooks 为什么获取不到最新值？

下面代码打印出来是空字符：这难道不是会更新的么：用的是蚂蚁的组件 import { Api_Module_Edit_Prepare, Api_Module_Edit_Save } from "../Request/Module" import { Input, Card, Form, Row, Col, Space, Collapse, Button, message } from 'antd'; import { useNavigate, useParams } from "react-router-dom"; import { useEffect, useState } from "react"; import "../Css/Edit.sass" export function Component() { const navigate = useNavigate(); const { module = "", id = 0 } = useParams(); const [primary] = Form.useForm(); const [messageApi, contextHolder] = message.useMessage(); const [tableActive, setTableActive] = useState(``) const [tableData, setTableData] = useState>({}) const [tabList, setTabList] = useState([]); const onFinish = (data: any) => { const params = { table: tableActive, data: data } Api_Module_Edit_Save(module, [params]).then((res) => { messageApi.success("保存成功") }) } // 渲染：表单【主表 + 子表】：Card const formatTableData = (data: any) => data.reduce((loop: any, item: any, index: number) => ({ ...loop, [item.table_name]: index === 0 ? renderFormItem(item) : renderTableItem(item) }), {}); // 渲染：标签【主表 + 子表】 const formatTableTabs = (data: any) => data.map((item: any) => ({ key: item.table_name, tab: item.display_name, })) // 渲染：主表表单 const renderFormItem = (table: any) => { const renderFormItem = (columns: any) => columns.map((column: any) => ( )) return ( {table.sections.map((section: any) => ( {renderFormItem(section.columns)} }]} /> ))} ) } // 渲染：子表数据 const renderTableItem = (data: any) => data.map((item: any) => ({ })) // 渲染：公共操作 const renderPublicActions = [ navigate(-1)}>返回 primary.submit()}>保存 ] useEffect(() => { Api_Module_Edit_Prepare(module).then((res) => { setTableData(formatTableData(res.form)) setTabList(formatTableTabs(res.form)) setTableActive(res.form[0].table_name) }) }, [module]) return ( {contextHolder} {tableData[tableActive]} ) } Component.displayName = "Edit"; }, [module])

浏览量139

世界唯一的

react的微状态管理器，大家如何选择？

前年学习了一个 ""zustand"" (https://link.segmentfault.com/?enc=fSaqZXVikJZn4Vx7xyePhg%3D%3D.7T8c6RimfgKWGHLl5jy4W4EhogfTBMn9CwKWzwgxWAD7yUeFzm0gbsODQMRCHsRT), 觉得非常好用。去年的项目里用了一个""resy"" (https://link.segmentfault.com/?enc=QC25UXuIgwTuJea3J4aIhg%3D%3D.ScFnET2L9zxfQpPa1RqnkzVWnSs7DTV%2B5aMoBK0VyvTOSO3pjh573KUFO9kejLoqRBoo%2BXNRLddiLvezNGF6DQ%3D%3D), 现在都想不起来哪里看到的，也能用，而且写法比zustand的更简单。今天搜了一下，热门的还有""jotai"" (https://link.segmentfault.com/?enc=8mF63DqK%2BKpCLoMYXdPRQQ%3D%3D.Ypjz1DEofoeJeNf%2F7HcfMrt%2FHBwgv%2Bopbj3rT0V4DlC05hfFx00xToVcqu78R2Ew), ""effector-react"" (https://link.segmentfault.com/?enc=VcsZEGDbKe6TthFkTM7zSA%3D%3D.tQn9IrKNi7zLlvplUtm0G%2BIfKWGeVVPouzpj12gdp9k%3D), ""nuqs"" (https://link.segmentfault.com/?enc=rbGYz5PjwTw1peV3s%2BC3kw%3D%3D.rQKiC9w4WQdfN1AkNlfQD1HtCjEvmwWI3bcnTmTLNB0%3D) 大家有用过这些吗，感觉如何？或者有其他的推荐？

浏览量150