当前位置：首页 > React

react如何禁用组件

2026-03-31 07:07:37React

禁用 React 组件的几种方法

使用 disabled 属性
对于表单元素（如按钮、输入框），可以直接添加 disabled 属性：

<button disabled={true}>提交</button>
<input disabled={isDisabled} />

通过 CSS 控制视觉与交互
通过条件类名或内联样式禁用组件的交互和视觉效果：

<div className={isDisabled ? 'disabled-component' : ''} onClick={isDisabled ? null : handleClick}>
  内容
</div>

CSS 示例：

.disabled-component {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}

条件渲染替代组件
直接渲染一个禁用状态的占位组件：

{isDisabled ? (
  <div className="disabled-placeholder">功能已禁用</div>
) : (
  <InteractiveComponent />
)}

封装高阶组件（HOC）
创建可复用的禁用逻辑高阶组件：

function withDisabled(WrappedComponent) {
  return function DisabledWrapper({ disabled, ...props }) {
    return disabled ? (
      <div className="disabled-wrapper">禁用状态</div>
    ) : (
      <WrappedComponent {...props} />
    );
  };
}

const EnhancedButton = withDisabled(Button);

使用 Context 全局控制
通过 Context 传递禁用状态给深层嵌套组件：

react如何禁用组件

const DisableContext = createContext(false);

function App() {
  return (
    <DisableContext.Provider value={true}>
      <NestedComponent />
    </DisableContext.Provider>
  );
}

function NestedComponent() {
  const isDisabled = useContext(DisableContext);
  return <button disabled={isDisabled}>按钮</button>;
}