前言

在現(xiàn)代前端開發(fā)中，React 已經(jīng)成為了最受歡迎的 JavaScript 庫(kù)之一。而在復(fù)雜的應(yīng)用中，不同組件之間的數(shù)據(jù)傳遞問題顯得尤為關(guān)鍵。在本文中，我們將探討一種高效的方法，即如何利用彈框和高階組件特性來實(shí)現(xiàn) React 組件間的數(shù)據(jù)傳遞。我們將通過一個(gè)具體的業(yè)務(wù)場(chǎng)景來深入講解

業(yè)務(wù)場(chǎng)景介紹

假設(shè)我們正在開發(fā)一個(gè)項(xiàng)目管理系統(tǒng)，其中一個(gè)關(guān)鍵功能是發(fā)起項(xiàng)目立項(xiàng)審批。在主頁(yè)面上，用戶可以看到一張項(xiàng)目列表，每個(gè)項(xiàng)目都帶有一個(gè)“發(fā)起審批”按鈕。點(diǎn)擊該按鈕后，一個(gè)彈框?qū)@示，允許用戶選擇公司部門并查看相關(guān)的審批流程。在這個(gè)過程中，我們需要實(shí)現(xiàn)從主頁(yè)面向彈框組件傳遞數(shù)據(jù)，并根據(jù)用戶的選擇加載相關(guān)的審批流程。

主頁(yè)面代碼

首先，我們有一個(gè)名為 ProjectManagement 的主頁(yè)面組件。在這個(gè)組件中，我們?yōu)槊總€(gè)項(xiàng)目都添加了一個(gè)“發(fā)起審批”按鈕，點(diǎn)擊該按鈕會(huì)觸發(fā) handleGoApprove 方法，將項(xiàng)目數(shù)據(jù)傳遞給彈框組件，彈框組件點(diǎn)擊確認(rèn)按鈕觸發(fā)handleApproveOk方法調(diào)用后端接口。

// 主頁(yè)面代碼
import React, { Component } from "react";
import {Table,Form,Button,Input,Collapse,Pagination,Divider,message,Modal,
} from "antd";
// ...
const { Column } = Table;
const { Panel } = Collapse;
const { confirm } = Modal;
class ProjectManagement extends Component {// ... 其他狀態(tài)和方法 ...// 處理發(fā)起審批按鈕點(diǎn)擊handleGoApprove = (row) => {// 更新狀態(tài)，傳遞數(shù)據(jù)到彈框組件this.setState({currentRowData: Object.assign({}, row),approveModalFormVisible: true,// ...});};// 處理子組件確認(rèn)提交按鈕handleApproveOk = (_) => {// 獲取子組件的propsconst { form } = this.approveItemFormRef.props;form.validateFields((err, fieldsValue) => {if (err) {return;}// 獲取API所需的參數(shù)const projectId = form.getFieldValue("projectId");const selectedCompany = form.getFieldValue("departCompany");const values = {...fieldsValue,projectId: projectId,selectedCompany: selectedCompany,};// 調(diào)用APIthis.setState({ approveModalFormLoading: true });toApprove(values).then((response) => {form.resetFields();this.setState({ approveModalFormVisible: false, approveModalFormLoading: false });message.success("發(fā)起成功!");this.fetchData();}).catch((e) => {message.success("發(fā)起失敗,請(qǐng)重試!");this.setState({ approveModalFormLoading: false });});});};// ... 其他渲染邏輯 ...render() {return (<div className="app-container">{/* 表格代碼 */}<Table>{/* 列定義 */}<Columnrender={(text, row) => (<ButtononClick={() => this.handleGoApprove(row)}>發(fā)起立項(xiàng)審批</Button>)}/></Table>{/* 彈框 */}<Modaltitle="發(fā)起立項(xiàng)審批"visible={this.state.approveModalFormVisible}onCancel={this.handleCancel}onOk={this.handleApproveOk}// ...>{/* 彈框內(nèi)容 */}<ApproveModalcurrentRowData={this.state.currentRowData}wrappedComponentRef={(formRef) => (this.approveItemFormRef = formRef)}// .../></Modal></div>);}
}

彈框組件代碼

接下來，讓我們看看彈框組件 ApproveModal 的代碼。在 componentWillMount 生命周期中，我們根據(jù)傳入的 currentRowData 獲取項(xiàng)目數(shù)據(jù)，并在狀態(tài)中初始化相關(guān)信息。然后，通過 getDepartLevelByUser 方法獲取部門層級(jí)信息，并將數(shù)據(jù)存儲(chǔ)在狀態(tài)中。

class ApproveModal extends Component {state = {userParentList: [],departCompanyList: [],selectedCompany: '', // 用于存儲(chǔ)選中的公司projectId: '',}componentWillMount() {const { currentRowData } = this.props;const projectId = currentRowData.id;const departmentManager = currentRowData.departmentManager;// 根據(jù)當(dāng)前行數(shù)據(jù)初始化狀態(tài)this.setState({projectId: projectId,});// 獲取部門層級(jí)信息并初始化狀態(tài)this.getDepartLevelByUser(departmentManager);}getDepartLevelByUser = (value) => {// 使用API獲取部門層級(jí)數(shù)據(jù)getDepartLevelByUser(value).then((response) => {const { data } = response.data;this.setState({departCompanyList: data,},() => {// 在狀態(tài)更新后，檢查 departCompanyList 是否有記錄if (this.state.departCompanyList.length > 0) {// 默認(rèn)填充第一條記錄的值const selectedCompany = this.state.departCompanyList[0].company;this.setState({selectedCompany: selectedCompany,},() => {// 在設(shè)置 selectedCompany 后觸發(fā) onChange 事件this.handleDepartCompanySelect(selectedCompany);});}});});}// ... 其他邏輯 ...render() {// 使用 getFieldDecorator 處理表單const { getFieldDecorator } = this.props.form;const { projectId, selectedCompany, userParentList } = this.state;return (<div><Form><Form.Item>{getFieldDecorator("departCompany", {initialValue: selectedCompany,// ...})(<Select onChange={this.handleDepartCompanySelect} value={selectedCompany}>{/* 渲染部門選項(xiàng) */}{departCompanyList.map((item) => (<Select.Option key={item.company} value={item.company}>{item.company}</Select.Option>))}</Select>)}</Form.Item>{/* 審批流程 */}<div style={{ display: this.state.selectedCompany ? 'flex' : 'none', alignItems: 'flex-start' }}><div style={{ marginRight: '20px' }}><h4 style={{ margin: 0 }}>【審批流程】:</h4></div><Timeline style={{ flex: 1 }}>{userParentList && userParentList.length > 0 && userParentList.map((user, index) => (<Timeline.Item key={user.key} color="green"><div>{user.value}</div></Timeline.Item>))}</Timeline></div></Form></div>);}
}// 利用高階組件（HOC）封裝表單
const WrappedApproveModal = Form.create()(ApproveModal);
export default WrappedApproveModal;

數(shù)據(jù)傳遞原理

在本例中，數(shù)據(jù)傳遞是通過主頁(yè)面狀態(tài)傳遞給彈框組件的 currentRowData 屬性實(shí)現(xiàn)的。彈框組件可以根據(jù)傳入的數(shù)據(jù)進(jìn)行初始化，并根據(jù)用戶選擇加載相應(yīng)的審批流程。另外，彈框組件還利用高階組件 Form.create() 來處理表單，從而更方便地管理表單域的值和狀態(tài)。

總結(jié)

通過這個(gè)實(shí)際的業(yè)務(wù)場(chǎng)景，我們深入探討了如何利用彈框和高階組件特性來實(shí)現(xiàn) React 組件間的數(shù)據(jù)傳遞。我們從主頁(yè)面?zhèn)鬟f數(shù)據(jù)到彈框組件，再到表單域，逐步分析了數(shù)據(jù)傳遞和狀態(tài)管理的過程。這種模式可以幫助你更好地組織代碼、實(shí)現(xiàn)數(shù)據(jù)流動(dòng)，并提高項(xiàng)目的可維護(hù)性和擴(kuò)展性。彈框組件內(nèi)部的 render 方法使用了 getFieldDecorator 處理表單，這讓我們可以輕松地管理表單域的值和狀態(tài)。

通過以上代碼和解釋，我們了解了一個(gè)典型的組件間數(shù)據(jù)傳遞方式，以及如何在 React 中利用彈框和高階組件特性來實(shí)現(xiàn)這種方式。這個(gè)方法可以應(yīng)用于許多場(chǎng)景，幫助我們更好地組織代碼、處理數(shù)據(jù)流動(dòng)，從而構(gòu)建更出色的應(yīng)用程序。

如果你在實(shí)際項(xiàng)目中遇到了類似的問題，不妨嘗試這個(gè)方法來處理組件間的數(shù)據(jù)傳遞。希望這篇文章對(duì)你有所幫助，如果你有任何疑問或想法，請(qǐng)隨時(shí)在下方留言。感謝閱讀！

結(jié)束語：只有責(zé)任才能讓我們的幸福變得厚重