react 实现显示与隐藏

显示与隐藏的实现方法

在React中，实现元素的显示与隐藏可以通过多种方式完成。以下是几种常见的方法：

条件渲染

通过JavaScript逻辑控制组件的渲染，适合需要完全移除DOM节点的情况：

function ToggleComponent() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle
      </button>
      {isVisible && <div>显示的内容</div>}
    </div>
  );
}

CSS类名切换

通过动态切换CSS类名实现显示隐藏，适合需要保留DOM节点但改变样式的场景：

function ToggleComponent() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle
      </button>
      <div className={isVisible ? 'show' : 'hide'}>
        动态显示的内容
      </div>
    </div>
  );
}

对应的CSS：

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

内联样式控制

直接通过style属性控制显示状态：

function ToggleComponent() {
  const [isVisible, setIsVisible] = useState(true);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle
      </button>
      <div style={{ display: isVisible ? 'block' : 'none' }}>
        内联样式控制的内容
      </div>
    </div>
  );
}

动画过渡效果

需要显示隐藏带有动画效果时，可以使用CSS过渡或动画库：

function AnimatedToggle() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle
      </button>
      <div className={`fade ${isVisible ? 'in' : 'out'}`}>
        带过渡效果的内容
      </div>
    </div>
  );
}

对应CSS：

.fade {
  transition: opacity 0.3s ease;
}
.fade.in {
  opacity: 1;
  display: block;
}
.fade.out {
  opacity: 0;
  display: none;
}

第三方库解决方案

使用专门的状态管理库如Framer Motion实现复杂动画：

import { motion, AnimatePresence } from 'framer-motion';

function MotionToggle() {
  const [isVisible, setIsVisible] = useState(false);

  return (
    <div>
      <button onClick={() => setIsVisible(!isVisible)}>
        Toggle
      </button>
      <AnimatePresence>
        {isVisible && (
          <motion.div
            initial={{ opacity: 0 }}
            animate={{ opacity: 1 }}
            exit={{ opacity: 0 }}
          >
            动画内容
          </motion.div>
        )}
      </AnimatePresence>
    </div>
  );
}

每种方法适用于不同场景，条件渲染适合需要完全卸载组件的情况，CSS方法适合保留DOM但改变显示状态，动画方案适合需要过渡效果的场景。根据具体需求选择最合适的实现方式。