react如何禁用组件
禁用 React 组件的常见方法
使用 disabled 属性传递
通过父组件向子组件传递 disabled 属性，子组件根据该属性控制交互行为。例如按钮组件：
function Button({ disabled, onClick, children }) {
return (
<button onClick={!disabled ? onClick : undefined} disabled={disabled}>
{children}
</button>
);
}
// 使用方式
<Button disabled={true}>禁用按钮</Button>通过 CSS 控制视觉与交互
结合 disabled 属性添加样式，阻止用户事件：
.disabled {
opacity: 0.5;
pointer-events: none;
cursor: not-allowed;
}在组件中动态添加类名：
<div className={isDisabled ? 'disabled' : ''}>...</div>条件渲染替代禁用
直接不渲染组件或替换为占位元素：
function ConditionalComponent({ isDisabled }) {
return isDisabled ? <div>功能不可用</div> : <InteractiveComponent />;
}高阶组件（HOC）封装
创建可复用的禁用逻辑高阶组件：
function withDisabled(WrappedComponent) {
return function ({ disabled, ...props }) {
return disabled ?
<div className="disabled-placeholder">已禁用</div> :
<WrappedComponent {...props} />;
};
}
const EnhancedComponent = withDisabled(MyComponent);自定义 Hook 管理状态
通过 Hook 集中管理禁用逻辑：
function useDisable(initialState) {
const [isDisabled, setDisabled] = useState(initialState);
const disable = () => setDisabled(true);
const enable = () => setDisabled(false);
return { isDisabled, disable, enable };
}
// 在组件中使用
const { isDisabled } = useDisable(false);注意事项
- 事件拦截：禁用时需阻止
onClick等事件的触发。 - 表单控件：原生表单元素（如
<input>、<button>）应使用原生disabled属性以保持语义。 - 可访问性：为屏幕阅读器添加
aria-disabled属性提升无障碍体验。
