React 中使用 useState 实现多个按钮的动态切换

本文旨在讲解如何使用 React 的 useState hook 实现多个按钮的动态切换，即点击一个按钮时显示其对应的提示信息，同时关闭其他按钮的提示信息。通过示例代码，我们将展示如何维护一个状态来跟踪当前选中的按钮，并根据该状态动态渲染提示信息。

在 React 中，动态切换多个按钮的状态并显示对应的提示信息，可以使用 useState hook 来管理当前选中的按钮。以下是一个详细的步骤和示例代码：

1. 初始化状态：

首先，使用 useState hook 创建一个状态变量 selectedBtn，用于存储当前选中的按钮的标识符。初始值可以设置为空字符串 “”，表示默认没有按钮被选中。

import { useState } from "react";
function App() {
const [selectedBtn, setSelectedBtn] = useState("");
// ...
}

2. 定义按钮列表：

创建一个按钮标识符的数组，例如：

const faqTipBtns = ["faqBtn1", "faqBtn2", "faqBtn3"];

3. 渲染按钮：

使用 map 方法遍历按钮数组，为每个按钮创建一个 JSX 元素。在每个按钮的 onClick 事件处理函数中，调用 setSelectedBtn 函数，将当前按钮的标识符设置为 selectedBtn 的值。

{faqTipBtns.map((button) => (
<div key={button}>
<button onClick={() => setSelectedBtn(button)}>{button}</button>
</div>
))}

注意：添加 key 属性，这是 React 渲染列表的推荐做法，提高渲染效率。

4. 渲染提示信息：

在每个按钮下方，根据 selectedBtn 的值，有条件地渲染提示信息。如果 selectedBtn 的值与当前按钮的标识符相同，则显示提示信息；否则，不显示。

{faqTipBtns.map((button) => (
<div key={button}>
{selectedBtn === button ? <div> Tooltip {button}</div> : <div />}
<button onClick={() => setSelectedBtn(button)}>{button}</button>
</div>
))}

完整示例代码：

import "./styles.css";
import { useState } from "react";
export default function App() {
const [selectedBtn, setSelectedBtn] = useState("");
const faqTipBtns = ["faqBtn1", "faqBtn2", "faqBtn3"];
return (
<div className="App">
<h1>show Tooltip that related with his button</h1>
{faqTipBtns.map((button) => (
<div key={button}>
{selectedBtn === button ? <div> Tooltip {button}</div> : <div />}
<button onClick={() => setSelectedBtn(button)}>{button}</button>
</div>
))}
</div>
);
}

注意事项：

• 状态提升： 如果按钮和提示信息不在同一个组件中，需要将 selectedBtn 状态提升到它们的共同父组件中，并通过 props 传递给子组件。
• 性能优化： 如果按钮数量很多，可以考虑使用 useMemo hook 来缓存提示信息，避免重复渲染。
• 唯一 Key： 在使用 map 函数渲染列表时，确保每个元素都有唯一的 key 属性，以便 React 能够高效地更新 DOM。

总结：

通过使用 useState hook 和条件渲染，可以轻松实现多个按钮的动态切换和提示信息的显示。关键在于维护一个状态来跟踪当前选中的按钮，并根据该状态动态渲染 UI。希望本教程能够帮助你理解如何在 React 中实现这一功能。