如何在使用 map() 呈现的按钮之间切换 CSS 类？

在 React 中，我们可以使用 map() 函数来渲染一组按钮，但是如何在按钮之间切换 CSS 类呢？本文将向您介绍如何通过 useState 钩子和条件语句修改按钮的 CSS 类。

步骤 1：为按钮添加状态

首先，我们需要在组件中定义一个状态来存储当前按钮的 CSS 类。为此，我们可以使用 useState 钩子。以下是代码示例：

import React, { useState } from "react";

function ButtonGroup(props) {
  const [activeButton, setActiveButton] = useState(null);

  return (
    <div className="button-group">
      {props.buttons.map((button, index) => (
        <button
          key={index}
          className={index === activeButton ? "active" : ""}
          onClick={() => setActiveButton(index)}
        >
          {button}
        </button>
      ))}
    </div>
  );
}

export default ButtonGroup;

在上面的示例中，我们使用 useState 钩子创建了一个名为 activeButton 的状态，它的初始值为 null。我们在渲染按钮时，使用条件语句检查按钮索引是否与 activeButton 状态匹配，如果匹配，则添加 active 类。

在 onClick 事件处理程序中，我们将 activeButton 状态更新为当前按钮的索引，从而使该按钮成为活动按钮。

步骤 2：修改 CSS 样式

接下来，我们需要在组件的样式表中定义 active 类的样式。以下是一个基本的样式表示例：

.button-group button {
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 3px;
  color: #333;
  cursor: pointer;
  margin-right: 5px;
  padding: 5px 10px;
}

.button-group button.active {
  background-color: #007bff;
  border-color: #007bff;
  color: #fff;
}

在上面的示例中，我们定义了两个类，一个是 button 类，它应用于所有按钮，另一个是 active 类，它应用于当前活动的按钮。当按钮处于 active 状态时，其背景色和文本颜色将会变化。

步骤 3：渲染按钮

最后，我们需要在父组件中渲染 ButtonGroup 组件，并向其传递要呈现的按钮的数组。以下是一个简单的示例：

import React from "react";
import ButtonGroup from "./ButtonGroup";

function App() {
  const buttons = ["Button 1", "Button 2", "Button 3"];

  return (
    <div className="App">
      <ButtonGroup buttons={buttons} />
    </div>
  );
}

export default App;

在上面的示例中，我们创建了一个简单的数组，并将其传递给 ButtonGroup 组件。

结论

现在，我们已经了解了如何在使用 map() 呈现的按钮之间切换 CSS 类。我们使用 useState 钩子来存储当前其 active 以及使用条件语句在渲染按钮时检查按钮索引是否与 activeButton 状态匹配。同时，我们在组件的样式表中定义了 active 类的样式，使按钮在 active 状态下变化样式。