本文详解如何在自定义 react 按钮组件中正确透传并应用 `disabled` 属性，确保其作为原生 html 属性生效，同时保持组件的类型安全与可维护性。
在 React 中，disabled 是 <button> 元素的原生布尔属性：当其存在（无论值为何）时，按钮即被禁用；若不存在，则按钮启用。因此，不能通过字符串 "true" 或 "false" 控制，而必须以布尔值形式直接透传。
你当前的组件未将 disabled prop 应用于 <button> 标签，导致传入的 disabled={true} 完全被忽略。修复方式非常简洁：只需将解构出的 disabled 属性直接赋给 <button> 的 disabled 属性即可：
import React from 'react';
import PropTypes from 'prop-types';
export default function Button({ htmlType, type, disabled, action, ...props }) {
return (
<button
type={htmlType}
disabled={disabled} // ✅ 关键修复：透传布尔值
onClick={action}
{...props} // ✅ 同时建议展开剩余 props（如 className、style 等）
>
{props.children}
</button>
);
}
Button.propTypes = {
htmlType: PropTypes.string.isRequired,
type: PropTypes.string, // 可选：补充 type 类型校验
disabled: PropTypes.bool,
action: PropTypes.func,
};? 注意：onClick 事件在 disabled={true} 时自动失效，无需额外判断；React 会正确渲染 <button disabled>，浏览器原生行为将阻止点击和聚焦。
调用方式保持不变，语义清晰：
<Button htmlType="button" disabled={true} action={() => console.log('clicked')}>
提交表单
</Button>
<Button htmlType="submit" disabled={isSubmitting}>
{isSubmitting ? '提交中...' : '立即提交'}
</Button>✅ 最佳实践补充：
- 使用 ...props 展开剩余属性，支持 className、aria-label、data-* 等通用 HTML 属性；
- 为 disabled 添加默认值 false，避免未传时为 undefined 导致意外行为（可写为 { disabled = false }）；
- 若需兼容服务端渲染（SSR），确保 disabled 始终为布尔值——避免传入 null/undefined，PropTypes 已提供基础防护。
至此，你的按钮组件既符合 HTML 规范，又具备良好的可复用性与可访问性（无障碍支持）。
