react如何隐藏组件

隐藏组件的常用方法

条件渲染 使用JavaScript条件语句控制组件渲染，例如if或三元运算符。当条件为false时组件不会被渲染到DOM中。

{isVisible && <Component />}

CSS隐藏方式 通过内联样式或className控制display或visibility属性，组件保留在DOM中但不可见。

<div style={{display: isVisible ? 'block' : 'none'}}>
  <Component />
</div>

高阶组件封装 创建HOC（Higher-Order Component）包裹目标组件，在HOC中实现显示/隐藏逻辑。

const withVisibility = (WrappedComponent) => (props) => 
  props.isVisible ? <WrappedComponent {...props} /> : null;

Portal渲染控制 使用ReactDOM.createPortal将组件渲染到其他DOM节点，通过控制目标节点的显示状态实现隐藏。

const modalRoot = document.getElementById('modal-root');
function Modal(props) {
  return ReactDOM.createPortal(
    props.show && <ChildComponent />,
    modalRoot
  );
}

动态样式类名 结合CSS模块或样式库（如classnames），通过切换类名实现隐藏效果。

import cn from 'classnames';
<div className={cn({ 'hidden': !isVisible })}>
  <Content />
</div>

注意点

• 条件渲染会卸载组件，适合需要释放资源的场景
• CSS隐藏保留组件状态，适合频繁切换的场景
• Portal适用于需要脱离当前DOM结构的组件
• 性能敏感场景建议使用CSS方案避免频繁挂载/卸载