React使用switch实现的可切换Button组件渲染及事件异常问题

问题根源 #

你对React函数组件的参数定义存在错误，导致所有传入的自定义prop无法被正确识别：
React函数组件的第一个入参就是包含所有传入属性的完整props对象，第二个参数是预留用于ref转发的特殊参数，不会接收你自定义的属性。你当前的写法const Button = ({ children }, props) => 相当于：

• 仅从第一个props对象中解构提取了children属性
• as、click、icon等其他所有传入的属性都没有被接收
• 你读取的props.as来自第二个预留参数，值永远为undefined，因此switch判断永远走默认分支，只会渲染button标签，onClick事件也因为无法获取props.click而无法触发。

修复方案 #

调整组件参数的解构写法即可，两种可选写法如下：

写法1：逐个解构所有用到的属性

const Button = ({ children, as, link, click, icon }) => {
    switch (as) {
        case 'link':
            return (
                <Link
                    href={link}
                    onClick={click}
                    className={styles.hello}>
                    {icon && <FontAwesomeIcon icon={icon} />}
                    {children}
                </Link>
            );
        case 'button':
            return (
                <button
                    onClick={click}
                    type='button'
                    className={styles.btn}>
                    {icon && <FontAwesomeIcon icon={icon} />}
                    {children}
                </button>
            );
        default:
            return (
                <button
                    onClick={click}
                    type='button'
                    className={styles.btn}>
                    {icon && <FontAwesomeIcon icon={icon} />}
                    {children}
                </button>
            );
    }
};

写法2：保留完整props对象不解构

const Button = (props) => {
    switch (props.as) {
        case 'link':
            return (
                <Link
                    href={props.link}
                    onClick={props.click}
                    className={styles.hello}>
                    {props.icon && <FontAwesomeIcon icon={props.icon} />}
                    {props.children}
                </Link>
            );
        case 'button':
            return (
                <button
                    onClick={props.click}
                    type='button'
                    className={styles.btn}>
                    {props.icon && <FontAwesomeIcon icon={props.icon} />}
                    {props.children}
                </button>
            );
        default:
            return (
                <button
                    onClick={props.click}
                    type='button'
                    className={styles.btn}>
                    {props.icon && <FontAwesomeIcon icon={props.icon} />}
                    {props.children}
                </button>
            );
    }
};

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