react如何禁用组件

禁用 React 组件的常见方法

使用 disabled 属性传递 通过父组件向子组件传递 disabled 属性，子组件根据该属性值控制交互行为。例如按钮组件：

function Button({ disabled, onClick, children }) {
  return (
    <button disabled={disabled} onClick={onClick}>
      {children}
    </button>
  );
}

条件渲染 通过条件判断决定是否渲染组件，适合需要完全隐藏的场景：

{!isDisabled && <Component />}

CSS 控制视觉状态 通过 pointer-events 和 opacity 等 CSS 属性模拟禁用效果：

.disabled-component {
  pointer-events: none;
  opacity: 0.6;
}

高阶组件封装 创建可复用的高阶组件处理禁用逻辑：

function withDisabled(Component) {
  return ({ disabled, ...props }) => (
    <Component {...props} style={{ ...props.style, opacity: disabled ? 0.5 : 1 }} />
  );
}

Context 全局控制 通过 Context API 实现跨组件层级的状态管理：

const DisabledContext = React.createContext(false);

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

自定义 Hook 管理状态 使用 Hook 集中管理禁用状态和逻辑：

function useDisable(initialState) {
  const [isDisabled, setDisabled] = useState(initialState);
  return { isDisabled, setDisabled };
}

根据具体场景选择合适的方法，简单交互推荐属性传递，复杂场景可考虑高阶组件或 Context 方案。