react class改hooks写法

类头修改

export default class EditUseTable extends Component 

改为

export default function EditUseTable({})

参数修改

constructor(props) {super(props)const {dbRecord, type, currentRecord, readOnly, updateTaxAmount} = this.props

改为(主函数的参数)

export default function EditUseTable({dbRecord, type, currentRecord, readOnly, updateTaxAmount})

状态修改

this.state = {tableList: currentRecord?.bookList || [],visible: false,readOnly: readOnly,type: type,indexDbId: dbRecord.indexDbId,projectId: dbRecord.projectId,hasCostIndex: false,}

改为(不需要修改的状态直接去掉,直接用props参数就行)

    const [tableList,setTableList]=useState(currentRecord?.bookList || [])const [visible,setVisible]=useState(false)const [hasCostIndex,setHasCostIndex]=useState(false)

初始化函数修改

constructor(props) {……// 获取所有XX,根据当前记录上的list做处理if ('project' === type) {this.initIndexRemainInfo(dbRecord.projectId, currentRecord)}}

改为

useEffect(()=>{// 获取所有XX,根据当前记录上的list做处理if ('project' === type) {initIndexRemainInfo(dbRecord.projectId, currentRecord)}},[])

函数改const定义

async initIndexRemainInfo(projectId, currentRecord) {……}

改为

  const initIndexRemainInfo=async(projectId, currentRecord)=> {……}

this.state去掉

this.state.readOnly

改为

readOnly

注意缺少的state要加上
this指针去掉

    this.updateData(items, false)

改为

updateData(items, false)

setState改造

this.setState({ indexInfo: indices, hasCostIndex: true })

改为(注意缺少的state定义要补充,例本示例的const [indexInfo,setIndexInfo]=useState([]))

      setHasCostIndex(true)setIndexInfo(indices)

函数从类中获取的props改造
某函数里这样写

const { formContext, pactPage = '' } = this.props

改为补充到主函数参数里

export default function EditUseTable({bizContext:{ dbRecord, type, currentRecord, readOnly, updateTaxAmount },formContext, pactPage = ''}) {

render改造

render() {const columns = getColumns(type)return (<Box flex flexlayout={{ direction: 'column' }}></Box>)}

改为(去掉render()壳子)

return (<Box flex flexlayout={{ direction: 'column' }}></Box>)

其中return上面的代码const columns = getColumns(type)放到初始化里

  useEffect(() => {setColumns(getColumns(type))}, [])

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/147719.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

用5000字讲清楚压敏电阻

大家好,这里是大话硬件。 今天这篇文章用5000字的篇幅讲清楚压敏电阻。 1. 压敏电阻 压敏电阻,英文名Voltage Dependent Resistor,缩写VDR,或者叫Varistor,Variable(会变的)+ Resistor(电阻)。它的伏安特性曲线具有非线性。也就是压敏电阻的阻值并不是固定的,存在…

电子秤方案:做一个宠物勺方案设计

养宠物是一件费心劳力的事情&#xff0c;但同时也是能够给你带来快乐和幸福感的事情。就是有时候会怕宠物毫无征兆地生病令人措手不及&#xff0c;所以电子秤方案设计鼎盛合科技分享一个小方案&#xff0c;能够及时了解到宠物的身体状况问题。 蓝牙宠物勺是一种具有记录和称重…

全堆栈图像生成器专为Multiverse后端Bootcamp设计,结合了React、Firebase和Hugging Face API

目录 1 Full Stack Image Generator 1.1 Features 1.2 Technologies Used 1.3 Setup Instructions 1.4 Contributing 1.5 Acknowledgements Full Stack Image Generator This is a full-stack image generator built as a part of the Multiverse Backend Bootcam…

Openssl X509 v3 AuthorityKeyIdentifier实验与逻辑分析

Openssl是X509的事实标准&#xff0c;目前主流OS或个别安全性要求较高的设计场景&#xff0c;对X509的证书链验证已经不在停留在只从数字签名校验了&#xff0c;也就是仅仅从公钥验签的角度&#xff0c;在这些场景中&#xff0c;往往还会校验AuthorityKeyIdentifier和SubjectKe…

Egress-TLS-Origination

目录 文章目录 目录本节实战1、出口网关TLS发起2、通过 egress 网关发起双向 TLS 连接关于我最后 本节实战 实战名称&#x1f6a9; 实战&#xff1a;Egress TLS Origination-2023.11.19(failed)&#x1f6a9; 实战&#xff1a;通过 egress 网关发起双向 TLS 连接-2023.11.19(测…

第二十三章 STL-常用容器

一、string容器 1、string基本概念 本质&#xff1a; string是C风格的字符串&#xff0c;而string本质上是一个类 string和char * 区别&#xff1a; char * 是一个指针 string是一个类&#xff0c;类内部封装了char*&#xff0c;管理这个字符串&#xff0c;是一个char*型的…

STM32_SPI总线驱动OLED详细原理讲解

目录 这里写目录标题 第13章 Cortex-M4-SPI总线13.1 SPI总线概述13.1.1 SPI总线介绍13.1.2 SPI总线接口与物理拓扑结构13.1.3 SPI总线通信原理13.1.4 SPI总线数据格式 13.2 IO口模拟SPI操作OLED13.2.1 常见的显示设备13.2.2 OLED显示屏概述13.2.3 OLED特征13.2.4 显示原理13.2.…

【图数据库实战】HugeGraph架构

一、概述 作为一款通用的图数据库产品&#xff0c;HugeGraph需具备图数据的基本功能&#xff0c;如下图所示。HugeGraph包括三个层次的功能&#xff0c;分别是存储层、计算层和用户接口层。 HugeGraph支持OLTP和OLAP两种图计算类型&#xff0c;其中OLTP实现了Apache TinkerPop3…

webAPP基础学习

###视觉基础 part-I ####1.面试中常见的像素问题 >什么是像素? *1.什么是px? px-虚拟像素,css像素的单位 px是一个相对单位,相对于设备像素而言 >相对性 a.相对于同一个设备,css像素的可变的 css像素物理像素>会受到缩放的影响 css像素缩放倍数*单个物理像…

QEMU显示虚拟化的几种选项

QEMU可以通过通过命令行"-vga type"选择为客户机模拟的VGA卡的类别,可选择的类型有多个: -vga typeSelect type of VGA card to emulate. Valid values for type arecirrusCirrus Logic GD5446 Video card. All Windows versions starting from Windows 95 should …

计算3D目标框的NMS

3D障碍物目标框&#xff08;中心点坐标XYZ、长宽高lwh、朝向角theta&#xff09;的非极大值抑制 #include <iostream> #include <vector> #include <algorithm> #include <opencv2/opencv.hpp>// 定义3D目标框的结构体 struct BoundingBox3D {double …

MySQL集群高可用架构之MMM

目录 一、MMM概述 1.1 MMM 简介 1.2 MMM高可用架构 1.3 MMM工作原理 1.4 工作流程图 二、MMM高可用双主双从架构部署 1、架构&#xff1a; 2、搭建 MySQL 多主多从模式 3、安装配置 MySQL-MMM 4、故障测试 一、MMM概述 1.1 MMM 简介 MMM&#xff08;Master-Master re…

Linux网络应用层协议之http/https

文章目录 目录 一、http协议 1.URL 2.http协议格式 3.http的方法 4.http的状态码 5.http常见header 6.实现一个http服务器 二、https协议 1.加密 2.为什么要加密 3.常见的加密方式 对称加密 非对称加密 4.https的工作过程探究 方案1 只使用对称加密 方案2 只使…

开发知识点-Git

团队协作-Git Giteegitee 创建仓库打开项目所在目录&#xff0c;右键选择Git Bush Here(你要确定电脑上已经安装了Git&#xff09;初始化本地仓库配置验证信息。 完美解决github访问速度慢介绍Git 与 SVN 区别IDEA 添加 gitee Gitee Git Gitee 大家都知道国内访问 Github 速度…

Azure Machine Learning - Azure AI 搜索中的矢量搜索

矢量搜索是一种信息检索方法&#xff0c;它使用内容的数字表示形式来执行搜索方案。 由于内容是数字而不是纯文本&#xff0c;因此搜索引擎会匹配与查询最相似的矢量&#xff0c;而不需要匹配确切的字词。本文简要介绍了 Azure AI 搜索中的矢量支持。 其中还解释了与其他 Azure…

DPDK系列之三十六报文转发

一、网络报文处理 学过网络通信的都知道&#xff0c;其实在网络的底层数据就是一包&#xff08;帧&#xff09;包的。换句话说&#xff0c;所有的网络设备转发的其实就是一包包的二进制流数据。对设备或者驱动来说&#xff0c;这些数据没有什么任何意义&#xff0c;它们只是负…

Web之HTML笔记

Web之HTML、CSS、JS Web标准一、HTML&#xff08;超文本标记语言&#xff09;HTML 基本结构标签常用标签1.font标签2.p标签3.注释4.h系列标题5.img6.超链接a7.列表8.表格9.表单 Web之CSS笔记 Web标准 结构标准用于对网页元素进行整理和分类(HTML)表现标准用于设置网页元素的版…

LoRa模块空中唤醒功能原理和物联网应用

LoRa模块是一种广泛应用于物联网领域的无线通信模块&#xff0c;支持低功耗、远距离和低成本的无线通信。 其空中唤醒功能是一项重要的应用&#xff0c;可以实现设备的自动唤醒&#xff0c;从而在没有人工干预的情况下实现设备的远程监控和控制。 LoRa模块空中唤醒功能的原理…

HTTPS加密为什么能保证网络安全?

随着互联网的普及和发展&#xff0c;网络安全问题日益严重。为了保护用户的隐私和数据安全&#xff0c;许多网站都采用了HTTPS加密技术。那么&#xff0c;HTTPS加密为什么可以保证网络安全呢&#xff1f; 原因是HTTP协议采用的是数据明文传输方式。用户从客户端浏览器提交数据…

SHELL中的数组及其相关操作

快捷查看指令 ctrlf 进行搜索会直接定位到需要的知识点和命令讲解&#xff08;如有不正确的地方欢迎各位小伙伴在评论区提意见&#xff0c;博主会及时修改&#xff09; 数组 在shell中&#xff0c;可以使用数组来存储和操作一组数据。数组是由一个或多个元素组成的有序集合&am…