如何使用React函数式组件创建多切换开关？组件拆分遇问题求助

问题1：多切换开关功能实现（函数组件版） #

你提到查的方案多是类组件的，给按钮加name属性没生效，核心问题是状态管理和事件处理的方式不对。函数组件里可以用对象统一存储多个开关状态，通过按钮的name属性定位要切换的目标：

import { useState } from 'react';

function MultiToggle() {
  // 用对象存储多个开关的状态
  const [toggleStates, setToggleStates] = useState({
    switchA: false,
    switchB: false,
    switchC: false
  });

  const handleToggle = (e) => {
    const btnName = e.target.name;
    // 函数式更新确保拿到最新的状态快照
    setToggleStates(prevStates => ({
      ...prevStates,
      [btnName]: !prevStates[btnName]
    }));
  };

  return (
    <div>
      <button name="switchA" onClick={handleToggle}>
        {toggleStates.switchA ? "已开启" : "已关闭"}
      </button>
      <button name="switchB" onClick={handleToggle}>
        {toggleStates.switchB ? "已开启" : "已关闭"}
      </button>
    </div>
  );
}

关键要点：

• 用对象管理多开关状态，避免声明多个独立的useState变量
• 点击事件中通过e.target.name获取按钮标识，动态更新对应状态
• 使用函数式更新保证状态更新的准确性，避免旧状态覆盖问题

问题2：组件拆分后

元素无法正常分离 #

从你的代码沙箱来看，组件拆分时要注意props传递完整性和JSX结构合法性。正确的列表项拆分方式如下：

1. 拆分独立的ListItem组件 #

// ListItem.js
export default function ListItem({ title, isActive, onToggle }) {
  return (
    <li>
      <span>{isActive ? <strong>{title}</strong> : title}</span>
      <button onClick={onToggle}>切换状态</button>
    </li>
  );
}

2. 父组件中调用ListItem #

// App.js
import { useState } from 'react';
import ListItem from './ListItem';

function App() {
  const [listItems, setListItems] = useState([
    { id: 1, title: "标题1", isActive: false },
    { id: 2, title: "标题2", isActive: false }
  ]);

  const handleItemToggle = (itemId) => {
    setListItems(prevItems => 
      prevItems.map(item => 
        item.id === itemId ? {...item, isActive: !item.isActive} : item
      )
    );
  };

  return (
    <ul>
      {listItems.map(item => (
        <ListItem
          key={item.id}
          title={item.title}
          isActive={item.isActive}
          onToggle={() => handleItemToggle(item.id)}
        />
      ))}
    </ul>
  );
}

需要注意的细节：

• 给每个列表项传递唯一的key，帮助React识别元素的变化
• 将列表项的状态、标题、切换事件作为props传递给子组件
• 确保子组件返回完整的单个<li>元素，不要出现未包裹的同级元素

内容的提问来源于stack exchange，提问作者Lyon