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

本文旨在讲解如何使用 React 的 useState hook 实现多个按钮的动态 Tooltip 切换功能。通过维护一个状态变量来记录当前选中的按钮，并根据该状态来决定显示哪个按钮对应的 Tooltip，从而实现点击一个按钮显示其 Tooltip，点击另一个按钮则关闭前一个 Tooltip 并显示当前按钮的 Tooltip 的效果。

在 React 中，要实现点击一个按钮显示对应的 Tooltip，并且点击其他按钮时关闭之前的 Tooltip，需要使用 useState hook 来管理当前选中的按钮状态。 以下是一个详细的实现步骤和示例代码：

1. 初始化状态

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

import React, { useState } from 'react';

const App = () => {
  const [selectedBtn, setSelectedBtn] = useState('');
  const faqTipBtns = ['faqBtn1', 'faqBtn2', 'faqBtn3'];

  // ... 后面代码
};

export default App;

2. 创建按钮和 Tooltip

遍历按钮列表 faqTipBtns，为每个按钮创建一个按钮元素。在按钮的 onClick 事件处理函数中，调用 setSelectedBtn 更新 selectedBtn 状态为当前按钮的 ID。同时，根据 selectedBtn 的值来决定是否显示对应的 Tooltip。

import React, { useState } from 'react';

const App = () => {
  const [selectedBtn, setSelectedBtn] = useState('');
  const faqTipBtns = ['faqBtn1', 'faqBtn2', 'faqBtn3'];

  return (
    

      {faqTipBtns.map((button) => (
        

           setSelectedBtn(button)}>{button}
          {selectedBtn === button && (
            

              Tooltip for {button}
            
          )}
        
      ))}
    
  );
};

export default App;

3. Tooltip 组件 (可选)

Cursor

一个新的IDE，使用AI来帮助您重构、理解、调试和编写代码。

下载

可以将 Tooltip 的显示逻辑封装成一个单独的组件，以便更好地复用和管理。

import React from 'react';

const Tooltip = ({ content }) => {
  return (
    

      {content}
    
  );
};

export default Tooltip;

然后在 App 组件中使用 Tooltip 组件：

import React, { useState } from 'react';
import Tooltip from './Tooltip';

const App = () => {
  const [selectedBtn, setSelectedBtn] = useState('');
  const faqTipBtns = ['faqBtn1', 'faqBtn2', 'faqBtn3'];

  return (
    

      {faqTipBtns.map((button) => (
        

           setSelectedBtn(button)}>{button}
          {selectedBtn === button && (
            
          )}
        
      ))}
    
  );
};

export default App;

完整示例代码:

import React, { useState } from 'react';

const Tooltip = ({ content }) => {
  return (
    

      {content}
    
  );
};

const App = () => {
  const [selectedBtn, setSelectedBtn] = useState('');
  const faqTipBtns = ['faqBtn1', 'faqBtn2', 'faqBtn3'];

  return (
    

      {faqTipBtns.map((button) => (
        

           setSelectedBtn(button)}>{button}
          {selectedBtn === button && (
            
          )}
        
      ))}
    
  );
};

export default App;

注意事项:

• Key 属性： 在使用 map 函数渲染列表时，务必为每个元素添加唯一的 key 属性，以提高 React 的渲染性能。
• 状态管理： 对于更复杂的应用，可以考虑使用 Redux、Context API 或 Zustand 等状态管理工具来管理全局状态。
• 样式： 可以根据实际需求自定义 Tooltip 的样式，使其更符合应用的整体风格。
• 性能优化： 如果按钮数量很多，可以考虑使用 React.memo 或 useMemo 等技术来优化性能。

总结:

通过使用 useState hook 和条件渲染，可以轻松实现多个按钮的动态 Tooltip 切换功能。 这种方法简单易懂，适用于大多数场景。 通过合理地组织代码和使用合适的组件，可以使代码更加清晰和易于维护。