当前位置：首页 > news >正文

react 封装弹框组件传递数据

news 2025/11/15 8:43:10

当我们使用react 开发封装组件肯定涉及子向父传值

我们来直接上代码

来一个子组件

方式一：通过回调函数（最常用）

import React from 'react'
import { Modal } from 'antd'const CreateModal = (props) => {const {modalVisible,onSubmit,onCancel,title = "添加图书",children,okText = "确定",cancelText = "取消",width = 520,...restProps} = props// 子组件内部的处理函数const handleSubmit = () => {// 子组件准备要传递的数据const childData = {message: "这是子组件的数据",timestamp: new Date().getTime(),customField: "自定义字段"}// 调用父组件传递的回调函数，并传递数据onSubmit(childData)}const handleCancel = () => {const cancelData = {reason: "用户取消",time: new Date().toLocaleString()}onCancel(cancelData)}return (<Modaltitle={title}open={modalVisible}onOk={handleSubmit}onCancel={handleCancel}okText={okText}cancelText={cancelText}width={width}{...restProps}>{children || (<div><p>这里是默认内容</p><p>你可以通过 children 属性传入自定义内容</p></div>)}</Modal>)
}export default CreateModal

其实我认为这个父向子传值传方法其实相对来说比 vue 好理解相对来说

  onSubmit(childData)

当我们点击确定的时候就可以传值给父组件。父组件绑定这个数据就好了

<CreateModalmodalVisible={modalVisible}onSubmit={handleSubmit}onCancel={handleCancel}title="自定义标题">{/* 自定义内容 */}<div>这是自定义的弹窗内容</div></CreateModal>const [modalVisible, setModalVisible] = useState(false)const openModal = () => {setModalVisible(true)}const handleSubmit = (e) => {console.log(e, "e")}const handleCancel = () => {}

方式二：使用 forwardRef + useImperativeHandle

子组件

import React, { forwardRef, useImperativeHandle } from 'react'
import { Modal } from 'antd'const CreateModal = forwardRef((props, ref) => {const {modalVisible,onSubmit,onCancel,title = "添加图书",children,okText = "确定",cancelText = "取消",width = 520,...restProps} = props// 暴露给父组件的方法useImperativeHandle(ref, () => ({// 子组件的方法，父组件可以通过 ref 调用getChildData: () => {return {message: "来自子组件的数据",data: "其他数据"}},// 子组件的其他方法validateForm: () => {// 表单验证逻辑return true}}))const handleSubmit = () => {onSubmit()}const handleCancel = () => {onCancel()}return (<Modaltitle={title}open={modalVisible}onOk={handleSubmit}onCancel={handleCancel}okText={okText}cancelText={cancelText}width={width}{...restProps}>{children}</Modal>)
})export default CreateModal

父组件使用

import React, { useState, useRef } from 'react'
import { Button } from 'antd'
import CreateModal from './CreateModal'const ParentComponent = () => {const [modalVisible, setModalVisible] = useState(false)const modalRef = useRef()const handleSubmit = () => {// 通过 ref 获取子组件数据const childData = modalRef.current?.getChildData()console.log('子组件数据:', childData)// 验证表单const isValid = modalRef.current?.validateForm()if (isValid) {setModalVisible(false)}}const handleCancel = () => {setModalVisible(false)}return (<div><Button onClick={() => setModalVisible(true)}>打开弹窗</Button><CreateModalref={modalRef}modalVisible={modalVisible}onSubmit={handleSubmit}onCancel={handleCancel}/></div>)
}

方式三：使用 Context（适合深层嵌套）

子组件

import React, { createContext, useContext, useState } from 'react'
import { Modal } from 'antd'// 创建 Context
const ModalContext = createContext()const CreateModal = (props) => {const {modalVisible,onSubmit,onCancel,title = "添加图书",children,okText = "确定",cancelText = "取消",width = 520,...restProps} = propsconst [modalData, setModalData] = useState({})const handleSubmit = () => {// 传递数据给父组件onSubmit(modalData)}return (<ModalContext.Provider value={{ modalData, setModalData }}><Modaltitle={title}open={modalVisible}onOk={handleSubmit}onCancel={onCancel}okText={okText}cancelText={cancelText}width={width}{...restProps}>{children}</Modal></ModalContext.Provider>)
}// 在子组件内部使用
const ModalContent = () => {const { setModalData } = useContext(ModalContext)const handleInputChange = (e) => {setModalData(prev => ({...prev,inputValue: e.target.value}))}return (<div><input onChange={handleInputChange} placeholder="输入内容" /></div>)
}export { CreateModal, ModalContent }