React函数组件如何同时接收父组件props和children子组件参数

问题根源 #

React 函数组件仅会接收唯一的props参数，所有传入组件的属性（包括内置的children）都会被挂载到这个参数对象上，你之前写的双参数语法本身不符合React组件的定义规则，自然无法同时生效。

正确实现方式 #

完全支持同时接收自定义props和children，有两种常用写法：

写法1：不解构，直接从props读取所有属性

import React from 'react';
import useToggle from './hooks/useToggle';

function Modal(props) {
    const [hidden, toggleHidden] = useToggle(props.hidden);
    return (
        <div style={{
            position: 'fixed',
            textAlign: 'center',
            width: '100%',
            height: '100vh',
            display: `${hidden ? 'none' : 'flex'}`,
            alignItems: 'center',
            justifyContent: 'center',
            backgroundColor: 'rgba(0, 0, 0, .90)',
            zIndex: 1000
        }}>
            <div style={{
                width: '40%',
                height: '80%',
                border: '1px solid black',
            }}>
                <div style={{display: 'flex', width: '100%', height: '5%', justifyContent: 'end'}}>
                    <button onClick={toggleHidden}>Close</button>                    
                </div>
                <div style={{zIndex: 1500, width: '50%', height: '50%', backgroundColor: 'blue'}}>
                    {/* 直接取props.children即可拿到子组件 */}
                    {props.children}
                </div>
            </div>
        </div>
    )
}

export default Modal;

写法2：解构props，同时取出自定义属性和children

如果需要解构属性，可以把children和其他自定义属性放在同一个解构规则里：

// 第一个参数就是整个props对象，同时解构出你需要的自定义属性和children
function Modal({ hidden, children, ...restProps }) {
    const [hidden, toggleHidden] = useToggle(hidden);
    // restProps可以透传给根节点，支持父组件传入自定义样式、类名等
    return (
        <div {...restProps} style={{/* 原有样式 */}}>
            {/* 其余代码不变 */}
            {children}
        </div>
    )
}

更优的显隐控制方案 #

你当前把显隐状态存在组件内部，属于不可控组件，行业通用的方案是做可控+不可控兼容，适配更多使用场景：

• 若父组件传入了visible和onClose属性，就完全用父组件传入的状态控制显隐（可控模式，适合需要父组件管控关闭逻辑、关闭前做校验的场景）
• 若父组件没传，就用内部状态管理（不可控模式，适合简单的调用场景）

示例兼容代码片段：

function Modal({ visible: propsVisible, onClose, children }) {
    // 内部默认状态
    const [innerVisible, toggleInnerVisible] = useToggle(false);
    // 优先级：父组件传入的visible > 内部状态
    const isVisible = propsVisible ?? innerVisible;

    const handleClose = () => {
        // 优先调用父组件传入的关闭回调
        onClose?.();
        // 如果是不可控模式，更新内部状态
        if (propsVisible === undefined) {
            toggleInnerVisible();
        }
    }

    return (
        <div style={{display: isVisible ? 'flex' : 'none', /* 其余样式 */}}>
            <button onClick={handleClose}>Close</button>
            {children}
        </div>
    )
}

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