自定义组件事件处理写法验证：当前props传递方式是否合理？

问题分析与解决方案 #

你当前通过{...props}把事件传递给内部元素的方式是可行的，但存在代码bug和可优化的规范问题，下面逐一梳理：

先修复现有代码的明显错误

1. button.js中{text}未定义：应使用props.children渲染按钮内容，否则会抛出未定义错误，修改后为{props.children}。
2. app.js语法错误：onClick=(handleClick)要改成onClick={handleClick}；最后导出的应该是App而非Button，否则应用无法正常运行。
3. 语义化问题：尽量用原生<button>标签替代<div>，原生按钮自带键盘交互（回车/空格触发点击）、无障碍支持，无需手动添加role="button"，更符合Web规范。

自定义组件的事件处理规范

1. 当前{...props}传递事件的优缺点

• 优点：实现简单，所有DOM事件（onClick、onMouseOver等）会自动传递给内部元素，无需逐个声明。
• 缺点：会把所有props（包括你的自定义属性如type）都传给DOM元素，导致非DOM属性冗余渲染在节点上（比如<div type="normal">），不符合DOM规范。

2. 更规范的两种处理方式

方式一：显式传递指定事件（适合精确控制场景）

如果按钮只需要支持特定几个事件，可显式声明并传递，避免冗余属性：

// button.js
import classes from './button.module.css';

const ButtonTypes = {
    'normal': classes.normal, 
    'danger': classes.danger
};

const Button = ({ type, onClick, onMouseOver, children }) => {
    const className = ButtonTypes[type] || classes.normal;
    return (
        <button className={className} onClick={onClick} onMouseOver={onMouseOver}>
            {children}
        </button>
    );
}

export default Button;

方式二：分离自定义props与DOM props（推荐，支持全量DOM事件）

通过解构赋值把自定义属性（如type）分离，剩余props全部传递给内部元素，既保留便捷性，又避免自定义属性污染DOM：

// button.js
import classes from './button.module.css';

const ButtonTypes = {
    'normal': classes.normal, 
    'danger': classes.danger
};

const Button = ({ type, ...restProps }) => {
    const className = ButtonTypes[type] || classes.normal;
    return <button className={className} {...restProps} />;
}

export default Button;

额外规范建议

• 默认设置按钮type="button"：原生button在表单中默认是type="submit"，会触发表单提交，建议在组件中默认配置，或允许外部覆盖：

  const Button = ({ type = 'normal', ...restProps }) => {
      const className = ButtonTypes[type] || classes.normal;
      return <button type="button" className={className} {...restProps} />;
  }
  

• 支持disabled状态：可添加disabled属性并配合样式调整，让组件功能更完整。

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