react如何实现内容隐藏

使用条件渲染

在React中可以通过条件渲染来控制内容的显示与隐藏。常见的方法是使用&&运算符或三元表达式。例如：

{isVisible && <div>需要隐藏的内容</div>}

或

{isVisible ? <div>显示的内容</div> : null}

使用CSS控制

通过动态添加CSS类名或内联样式来实现隐藏效果。可以设置display: none或visibility: hidden：

<div style={{ display: isVisible ? 'block' : 'none' }}>
  内容区域
</div>

或使用className：

<div className={isVisible ? 'show' : 'hide'}>
  内容区域
</div>

对应的CSS：

.hide { display: none; }
.show { display: block; }

使用React Transition Group

需要实现动画效果时，可使用react-transition-group库控制元素的入场和离场：

import { CSSTransition } from 'react-transition-group';

<CSSTransition
  in={isVisible}
  timeout={300}
  classNames="fade"
  unmountOnExit
>
  <div>带过渡效果的内容</div>
</CSSTransition>

配套CSS：

.fade-enter { opacity: 0; }
.fade-enter-active { opacity: 1; transition: opacity 300ms; }
.fade-exit { opacity: 1; }
.fade-exit-active { opacity: 0; transition: opacity 300ms; }

使用第三方Hooks

自定义Hook或第三方库如react-use中的useToggle可简化状态管理：

import { useToggle } from 'react-use';

const [isVisible, toggleVisible] = useToggle(false);

<button onClick={toggleVisible}>切换</button>
{isVisible && <div>内容</div>}

性能优化建议

当隐藏大型组件时，优先考虑条件渲染而非CSS隐藏，因为前者会完全移除DOM节点。若需保留DOM状态（如表单输入值），可结合CSS或使用visibility: hidden替代display: none。