react怎么实现显示隐藏
显示隐藏的实现方法
在React中实现显示隐藏功能有多种方式，以下是常见的几种方法：
使用条件渲染
通过JavaScript条件判断控制元素的渲染，适用于简单的显示隐藏场景。
function ToggleComponent() {
const [isVisible, setIsVisible] = useState(false);
return (
<div>
<button onClick={() => setIsVisible(!isVisible)}>
Toggle
</button>
{isVisible && <div>显示的内容</div>}
</div>
);
}使用CSS类切换
通过动态切换CSS类来控制显示隐藏，这种方式可以配合CSS过渡效果实现动画。
function ToggleComponent() {
const [isVisible, setIsVisible] = useState(false);
return (
<div>
<button onClick={() => setIsVisible(!isVisible)}>
Toggle
</button>
<div className={isVisible ? 'visible' : 'hidden'}>
显示的内容
</div>
</div>
);
}.visible {
display: block;
}
.hidden {
display: none;
}使用内联样式
直接通过style属性控制显示隐藏，适合简单场景。
function ToggleComponent() {
const [isVisible, setIsVisible] = useState(false);
return (
<div>
<button onClick={() => setIsVisible(!isVisible)}>
Toggle
</button>
<div style={{ display: isVisible ? 'block' : 'none' }}>
显示的内容
</div>
</div>
);
}使用React Transition Group
需要动画效果时可以使用React Transition Group库。
import { CSSTransition } from 'react-transition-group';
function ToggleComponent() {
const [isVisible, setIsVisible] = useState(false);
return (
<div>
<button onClick={() => setIsVisible(!isVisible)}>
Toggle
</button>
<CSSTransition
in={isVisible}
timeout={300}
classNames="fade"
unmountOnExit
>
<div>显示的内容</div>
</CSSTransition>
</div>
);
}.fade-enter {
opacity: 0;
}
.fade-enter-active {
opacity: 1;
transition: opacity 300ms;
}
.fade-exit {
opacity: 1;
}
.fade-exit-active {
opacity: 0;
transition: opacity 300ms;
}性能考虑
对于频繁切换的组件，使用CSS方式（display或visibility）比条件渲染性能更好，因为不会触发组件的卸载和重新挂载。
无障碍访问
实现显示隐藏时应该考虑无障碍访问：
- 使用aria-hidden属性
- 确保屏幕阅读器能正确识别状态变化
- 为控制按钮添加aria-expanded属性
<button
onClick={() => setIsVisible(!isVisible)}
aria-expanded={isVisible}
>
Toggle
</button>
