当前位置：首页 > React

react 实现切换

2026-01-26 16:51:00React

切换状态的基本实现

在 React 中，切换状态通常通过 useState 钩子实现。定义一个布尔状态变量，并通过事件触发其值的变化。

import React, { useState } from 'react';

function ToggleComponent() {
  const [isOn, setIsOn] = useState(false);

  const handleToggle = () => {
    setIsOn(!isOn);
  };

  return (
    <div>
      <button onClick={handleToggle}>
        {isOn ? 'ON' : 'OFF'}
      </button>
    </div>
  );
}

切换类名或样式

通过状态动态切换元素的类名或内联样式，实现 UI 变化。

function ToggleStyle() {
  const [isActive, setIsActive] = useState(false);

  return (
    <div>
      <button
        onClick={() => setIsActive(!isActive)}
        className={isActive ? 'active' : 'inactive'}
      >
        Toggle Style
      </button>
    </div>
  );
}

切换组件渲染

根据状态条件渲染不同的组件或内容。

function ToggleRender() {
  const [showContent, setShowContent] = useState(false);

  return (
    <div>
      <button onClick={() => setShowContent(!showContent)}>
        Toggle Content
      </button>
      {showContent && <div>Hidden Content Now Visible</div>}
    </div>
  );
}

切换多个选项

使用状态管理多个选项的切换，例如标签页或单选按钮组。

function TabSwitcher() {
  const [activeTab, setActiveTab] = useState('tab1');

  return (
    <div>
      <button onClick={() => setActiveTab('tab1')}>Tab 1</button>
      <button onClick={() => setActiveTab('tab2')}>Tab 2</button>
      {activeTab === 'tab1' && <div>Content for Tab 1</div>}
      {activeTab === 'tab2' && <div>Content for Tab 2</div>}
    </div>
  );
}

切换动画效果

结合 CSS 或动画库（如 Framer Motion）实现平滑的切换效果。

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

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

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

切换自定义 Hook

封装切换逻辑为可复用的自定义 Hook。

function useToggle(initialValue = false) {
  const [value, setValue] = useState(initialValue);
  const toggle = () => setValue(!value);
  return [value, toggle];
}

function CustomHookToggle() {
  const [isOn, toggleIsOn] = useToggle(false);

  return (
    <button onClick={toggleIsOn}>
      {isOn ? 'ON' : 'OFF'}
    </button>
  );
}

react 实现切换