React组件间数据传递(弹框和高阶组件(HOC)特性实现)

前言

在现代前端开发中,React 已经成为了最受欢迎的 JavaScript 库之一。而在复杂的应用中,不同组件之间的数据传递问题显得尤为关键。在本文中,我们将探讨一种高效的方法,即如何利用弹框和高阶组件特性来实现 React 组件间的数据传递。我们将通过一个具体的业务场景来深入讲解

业务场景介绍

假设我们正在开发一个项目管理系统,其中一个关键功能是发起项目立项审批。在主页面上,用户可以看到一张项目列表,每个项目都带有一个“发起审批”按钮。点击该按钮后,一个弹框将显示,允许用户选择公司部门并查看相关的审批流程。在这个过程中,我们需要实现从主页面向弹框组件传递数据,并根据用户的选择加载相关的审批流程。

主页面代码

首先,我们有一个名为 ProjectManagement 的主页面组件。在这个组件中,我们为每个项目都添加了一个“发起审批”按钮,点击该按钮会触发 handleGoApprove 方法,将项目数据传递给弹框组件,弹框组件点击确认按钮触发handleApproveOk方法调用后端接口。

// 主页面代码
class ProjectManagement extends Component {// ... 其他状态和方法 ...// 处理发起审批按钮点击handleGoApprove = (row) => {// 更新状态,传递数据到弹框组件this.setState({currentRowData: Object.assign({}, row),approveModalFormVisible: true,// ...});};// 处理子组件确认提交按钮handleApproveOk = (_) => {// 获取子组件的propsconst { form } = this.approveItemFormRef.props;form.validateFields((err, fieldsValue) => {if (err) {return;}// 获取API所需的参数const projectId = form.getFieldValue("projectId");const selectedCompany = form.getFieldValue("departCompany");const values = {...fieldsValue,projectId: projectId,selectedCompany: selectedCompany,};// 调用APIthis.setState({ approveModalFormLoading: true });toApprove(values).then((response) => {form.resetFields();this.setState({ approveModalFormVisible: false, approveModalFormLoading: false });message.success("发起成功!");this.fetchData();}).catch((e) => {message.success("发起失败,请重试!");this.setState({ approveModalFormLoading: false });});});};// ... 其他渲染逻辑 ...render() {return (<div className="app-container">{/* 表格代码 */}<Table>{/* 列定义 */}<Columnrender={(text, row) => (<ButtononClick={() => this.handleGoApprove(row)}>发起立项审批</Button>)}/></Table>{/* 弹框 */}<Modaltitle="发起立项审批"visible={this.state.approveModalFormVisible}onCancel={this.handleCancel}onOk={this.handleApproveOk}// ...>{/* 弹框内容 */}<ApproveModalcurrentRowData={this.state.currentRowData}wrappedComponentRef={(formRef) => (this.approveItemFormRef = formRef)}// .../></Modal></div>);}
}

弹框组件代码

接下来,让我们看看弹框组件 ApproveModal 的代码。在 componentWillMount 生命周期中,我们根据传入的 currentRowData 获取项目数据,并在状态中初始化相关信息。然后,通过 getDepartLevelByUser 方法获取部门层级信息,并将数据存储在状态中。

class ApproveModal extends Component {state = {userParentList: [],departCompanyList: [],selectedCompany: '', // 用于存储选中的公司projectId: '',}componentWillMount() {const { currentRowData } = this.props;const projectId = currentRowData.id;const departmentManager = currentRowData.departmentManager;// 根据当前行数据初始化状态this.setState({projectId: projectId,});// 获取部门层级信息并初始化状态this.getDepartLevelByUser(departmentManager);}getDepartLevelByUser = (value) => {// 使用API获取部门层级数据getDepartLevelByUser(value).then((response) => {const { data } = response.data;this.setState({departCompanyList: data,},() => {// 在状态更新后,检查 departCompanyList 是否有记录if (this.state.departCompanyList.length > 0) {// 默认填充第一条记录的值const selectedCompany = this.state.departCompanyList[0].company;this.setState({selectedCompany: selectedCompany,},() => {// 在设置 selectedCompany 后触发 onChange 事件this.handleDepartCompanySelect(selectedCompany);});}});});}// ... 其他逻辑 ...render() {// 使用 getFieldDecorator 处理表单const { getFieldDecorator } = this.props.form;const { selectedCompany, departCompanyList } = this.state;return (<div><Form><Form.Item>{getFieldDecorator("departCompany", {initialValue: selectedCompany,// ...})(<Select onChange={this.handleDepartCompanySelect} value={selectedCompany}>{/* 渲染部门选项 */}{departCompanyList.map((item) => (<Select.Option key={item.company} value={item.company}>{item.company}</Select.Option>))}</Select>)}</Form.Item>{/* 审批流程 */}{selectedCompany && (<div><h4>【审批流程】:</h4><ol>{/* 渲染审批人员 */}{departCompanyList.find((item) => item.company === selectedCompany).userDtoList?.map((user) => (<li key={user.userId}>{user.username}</li>))}</ol></div>)}</Form></div>);}
}// 利用高阶组件(HOC)封装表单
const WrappedApproveModal = Form.create()(ApproveModal);
export default WrappedApproveModal;

在这里插入图片描述

数据传递原理

在本例中,数据传递是通过主页面状态传递给弹框组件的 currentRowData 属性实现的。弹框组件可以根据传入的数据进行初始化,并根据用户选择加载相应的审批流程。另外,弹框组件还利用高阶组件 Form.create() 来处理表单,从而更方便地管理表单域的值和状态。

总结

通过这个实际的业务场景,我们深入探讨了如何利用弹框和高阶组件特性来实现 React 组件间的数据传递。我们从主页面传递数据到弹框组件,再到表单域,逐步分析了数据传递和状态管理的过程。这种模式可以帮助你更好地组织代码、实现数据流动,并提高项目的可维护性和扩展性。弹框组件内部的 render 方法使用了 getFieldDecorator 处理表单,这让我们可以轻松地管理表单域的值和状态。

通过以上代码和解释,我们了解了一个典型的组件间数据传递方式,以及如何在 React 中利用弹框和高阶组件特性来实现这种方式。这个方法可以应用于许多场景,帮助我们更好地组织代码、处理数据流动,从而构建更出色的应用程序。

如果你在实际项目中遇到了类似的问题,不妨尝试这个方法来处理组件间的数据传递。希望这篇文章对你有所帮助,如果你有任何疑问或想法,请随时在下方留言。感谢阅读!

结束语:只有责任才能让我们的幸福变得厚重

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

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

相关文章

多维时序 | MATLAB实现BiTCN-BiGRU-Attention多变量时间序列预测

多维时序 | MATLAB实现SABO-CNN-GRU-Attention多变量时间序列预测 目录 多维时序 | MATLAB实现SABO-CNN-GRU-Attention多变量时间序列预测预测效果基本介绍模型描述程序设计参考资料 预测效果 基本介绍 多维时序 | MATLAB实现BiTCN-BiGRU-Attention多变量时间序列预测。 模型描…

用友T3 T6 服务无法启动 windows10 11等操作系统 T3服务没有开启

windows 10 11 等高版本操作系统故障。 于2023-08-23日大量爆发。。 导致原因&#xff0c;windows操作系统根证书颁发机构吊销或已到期。 正版软件请打11.2最新补丁即可解决。 如果是老版本需要修复证书才可以。

C语言:选择+编程(每日一练Day8)

目录 选择题&#xff1a; 题一&#xff1a; 题二&#xff1a; 题三&#xff1a; 题四&#xff1a; 题五&#xff1a; 编程题&#xff1a; 题一&#xff1a;字符个数统计 思路一&#xff1a; 题二&#xff1a;多数元素 思路一&#xff1a; 本人实力有限可能对一些…

麒麟系统上安装 MySQL 8.0.24

我介绍一下在麒麟系统上安装 MySQL 8.0.24 的详细步骤&#xff0c;前提是您已经下载了 mysql-8.0.24-linux-glibc2.12-x86_64.tar.xz 安装包。其实安装很简单&#xff0c;但是有坑&#xff0c;而且问题非常严重&#xff01;由于麒麟系统相关文章博客较少&#xff0c;导致遇到了…

商城-学习整理-集群-K8S-集群环境部署(二十四)

目录 一、MySQL集群1、mysql集群原理2、Docker安装模拟MySQL主从复制集群1、下载mysql镜像2、创建Master实例并启动3、创建 Slave 实例并启动4、为 master 授权用户来同步数据1、进入 master 容器2、进入 mysql 内部 &#xff08;mysql –uroot -p&#xff09;3、查看 master 状…

根据源码,模拟实现 RabbitMQ - 转发规则实现(6)

目录 一、转发规则实现 1.1、需求分析 1.2、实现 Router 转发规则 1.2.1、bindingKey 和 routingKey 参数校验 1.2.2、消息匹配规则 1.2.3、主题交换机匹配规则 一、转发规则实现 1.1、需求分析 这里主要实现 routingKey 和 bindingKey 参数的校验&#xff0c;以及 Topic…

MySQL回表是什么?哪些情况下会回表

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌&#xff0c;CSDN博客专家&#xff0c;阿里云社区专家博主&#xff0c;2023年6月CSDN上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责…

第4篇:vscode+platformio搭建esp32 arduino开发环境

第1篇:Arduino与ESP32开发板的安装方法 第2篇:ESP32 helloword第一个程序示范点亮板载LED 第3篇:vscode搭建esp32 arduino开发环境 1.配置默认安装路径&#xff0c;安装到D盘。 打开环境变量&#xff0c;点击新建 输入变量名PLATFORMIO_CORE_DIR与路径&#xff1a;D:\PLATF…

3DXML在线查看与转换工具

3DXML 由软件巨头达索系统推出&#xff0c;是 3D 设计和工程中的关键文件格式&#xff0c;提供了封装和共享 3D 数据的系统方法。 为了将简单性与丰富的数据表示相结合&#xff0c;3DXML 在与 STEP 等其他文件格式相比时展现出其独特的优势&#xff0c;特别是在数据丰富性和紧凑…

SpringMVC中Controller层获取前端请求参数的几种方式

SpringMVC中Controller层获取前端请求参数的几种方式 1、SpringMVC自动绑定2、使用RequestParam 注解进行接收3、RequestBody注解&#xff08;1&#xff09; 使用实体来接收JSON&#xff08;2&#xff09;使用 Map 集合接收JSON&#xff08;3&#xff09; 使用 List集合接收JSO…

【WebSocket】前端使用WebSocket实时通信

目录 前言什么是WebSocketWebSocket的工作原理WebSocket与HTTP的关系HTTP建立持久化连接WebSocket类封装 前言 最近写项目&#xff0c;需要实现消息通知和实时聊天的功能&#xff0c;就去了解了一些关于websocket的知识&#xff0c;总结如下。 什么是WebSocket WebSocket 是一…

PL 侧驱动和fpga 重加载的方法

可以解决很多的问题 时钟稳定后加载特定fpga ip &#xff08;要不内核崩的一塌糊涂&#xff09;fpga 稳定复位软件决定fpga ip 加载的时序 dluash load /usr/local/scripts/si5512_setup.lua usleep 30 mkdir -p /lib/firmware cp -rf /usr/local/firmare/{*.bit.bin,*.dtbo} …