如何从子组件向父组件传递Prop？附组件代码排查

问题分析 #

从提供的代码来看，导致状态传递失败的核心问题有以下几点：

• 父组件未定义modalProps和handleModalOpen函数，弹窗的显示状态无法正确控制，回调逻辑无法触发
• 子组件按钮文本直接写死为字符串confirmBtnTitle，未使用传入的Props变量
• 父组件的onConfirm回调未接收子组件传递的选中状态，而是依赖自身的selectedStatus状态，存在不同步风险
• 子组件调用onConfirm时未做存在性校验，可能导致报错

修复后的完整代码 #

子组件：UpdateServerStatusModal.jsx

...other imports
import Select from './Select'

const UpdateServerStatusModal = ({
    open,
    setOpen,
    title = '',
    confirmBtnTitle = 'Delete',
    variant = 'alert',
    onConfirm,
    icon = 'exclamation',
    initialStatus, // 新增：接收父组件传入的初始状态
}) => {
    const statusList = [
        { id: 1, label: 'active' },
        { id: 2, label: 'full' },
        { id: 3, label: 'inactive' },
    ]
    // 优先使用父组件传入的初始状态，无则用默认值
    const [selectedStatus, setSelectedStatus] = useState(initialStatus || statusList[0].label)

    const handleConfirm = async () => {
        // 先校验onConfirm存在再执行，避免报错
        if (onConfirm) {
            await onConfirm(selectedStatus)
            // 执行完成后关闭弹窗
            setOpen(false)
        }
    }

    return (
        <Modal open={!!open} setOpen={setOpen} width={464}>
            <Modal.Title>
                {icons[icon]}
                <span>{title}</span>
            </Modal.Title>
            <Select
                idKey="id"
                labelKey="label"
                value={selectedStatus}
                placeholder="Select type"
                onChange={label => setSelectedStatus(label)}
                list={statusList}
            />

            <div>
                <Button onClick={handleConfirm}>
                    {confirmBtnTitle} {/* 修复：使用Props变量，而非字符串 */}
                </Button>
            </div>
        </Modal>
    )
}

export default UpdateServerStatusModal

父组件：Servers.jsx

import { useEffect, useState } from 'react'
import axios from '@/lib/axios'
import Dropdown from '@/components/Dropdown'
import UpdateServerStatusModal from '@/components/updateServerStatusModal'

const Servers = () => {
    const [servers, setServers] = useState(null)
    // 新增：管理弹窗状态
    const [modalProps, setModalProps] = useState({
        open: false,
        title: '',
        text: '',
        confirmText: '',
        type: '',
        onConfirm: null,
        initialStatus: ''
    })

    // 新增：弹窗状态控制函数
    const handleModalOpen = (open, props = {}) => {
        setModalProps(prev => ({ ...prev, open, ...props }))
    }

    const handleUpdateStatus = server => {
        handleModalOpen(true, {
            title: 'Update Server Status',
            text: <span>Are you sure you want to update server status</span>,
            confirmText: 'Update Status',
            type: 'info',
            initialStatus: server?.status, // 传入当前服务器的状态作为初始值
            // 直接接收子组件传递的选中状态参数
            onConfirm: async (selectedStatus) => {
                try {
                    await axios.put(`/api/servers/${server?.uuid}`, {
                        status: selectedStatus,
                    })
                    // 成功后刷新服务器列表（可选）
                    // const res = await axios.get('/api/servers')
                    // setServers(res.data)
                } catch (err) {
                    console.error('更新状态失败:', err)
                }
            },
        })
    }

    return (
        <>
            {/* 这里应该有服务器列表的渲染逻辑，比如遍历servers */}
            {/* {servers?.map(server => (
                <div key={server.uuid}>
                    <button onClick={() => handleUpdateStatus(server)}>修改状态</button>
                </div>
            ))} */}

            <UpdateServerStatusModal
                open={modalProps.open}
                setOpen={(open) => handleModalOpen(open)}
                title={modalProps.title}
                description={modalProps.text}
                confirmBtnTitle={modalProps.confirmText}
                variant={modalProps.type}
                onConfirm={modalProps.onConfirm}
                initialStatus={modalProps.initialStatus}
            />
        </>
    )
}

export default Servers

核心修复要点 #

1. 完善弹窗状态管理：父组件新增modalProps和handleModalOpen，确保弹窗的显示/隐藏逻辑正常
2. 直接传递选中状态：通过onConfirm回调直接将子组件的selectedStatus传递给父组件，避免依赖状态同步
3. 修复变量引用错误：子组件按钮文本改为使用{confirmBtnTitle}变量，而非写死字符串
4. 增加容错处理：调用onConfirm前先校验是否存在，避免空指针报错

内容的提问来源于stack exchange，提问作者oyerohabib