通过列表映射后的React切换按钮

基础概念

在React中，切换按钮通常是指一个可以根据用户交互改变状态的按钮。这种按钮可以通过状态管理来实现不同的视觉效果或功能切换。列表映射（List Mapping）是指使用JavaScript的map函数来遍历数组，并为数组中的每个元素生成对应的UI组件。

类型

基本切换按钮：简单的开/关状态切换。
图标切换按钮：使用不同的图标表示不同的状态。
颜色切换按钮：通过改变背景颜色来表示状态。

应用场景

主题切换：允许用户在亮色和暗色主题之间切换。
权限控制：根据用户的权限显示或隐藏某些功能。
表单控件：如单选按钮组或多选框。

示例代码

以下是一个简单的React切换按钮示例，使用了列表映射来生成多个按钮，并且每个按钮都可以切换状态。

import React, { useState } from 'react';

const ToggleButton = ({ items }) => {
  const [activeIndex, setActiveIndex] = useState(null);

  const toggleButton = (index) => {
    setActiveIndex((prevIndex) => (prevIndex === index ? null : index));
  };

  return (
    <div>
      {items.map((item, index) => (
        <button
          key={index}
          onClick={() => toggleButton(index)}
          style={{ backgroundColor: activeIndex === index ? 'blue' : 'grey', color: 'white' }}
        >
          {item}
        </button>
      ))}
    </div>
  );
};

const App = () => {
  const items = ['Option 1', 'Option 2', 'Option 3'];

  return (
    <div>
      <h1>Toggle Buttons Example</h1>
      <ToggleButton items={items} />
    </div>
  );
};

export default App;