如何使用React useState实现多个FAQ按钮的动态切换

你当前的代码存在几个核心问题：只用单个布尔状态无法区分不同按钮的激活状态、toggle函数逻辑错误（循环调用setIsOpen会导致状态混乱）、组件命名冲突、JSX语法不完整。以下是修正后的实现：

核心思路 #

用一个状态变量记录当前激活的FAQ按钮ID，初始值为null：

• 点击按钮时，将状态设置为当前按钮的ID（若点击的是已激活的按钮，可选择关闭提示框）
• 提示框根据当前激活ID是否匹配自身关联的按钮ID来决定是否显示

修正后的完整代码 #

import { useState } from 'react';
// 假设你已经导入了RadioGroup、Radio、FaqtipIcon、FaqtipContent组件

const App = () => {
  // 用activeFaqId记录当前激活的按钮ID，初始为null表示无激活状态
  const [activeFaqId, setActiveFaqId] = useState(null);
  const faqTipBtns = ['faqBtn1', 'faqBtn2', 'faqBtn3'];

  // 重命名按钮组件避免和图标组件冲突
  const FaqTipButton = (buttonId) => {
    const handleClick = () => {
      // 点击已激活的按钮则关闭，否则切换到当前按钮
      setActiveFaqId(prevId => prevId === buttonId ? null : buttonId);
    };

    return (
      <button id={buttonId} onClick={handleClick}>
        {/* 图标组件的isOpen根据当前按钮是否激活传值 */}
        <FaqtipIcon isOpen={activeFaqId === buttonId} />
      </button>
    );
  };

  return (
    <form>
      <RadioGroup>
        {/* 示例：关联idA的FAQ按钮 */}
        <div>
          <Radio id='idA' label='SomeLabel' />
          {FaqTipButton('idA')}
          {/* 仅当activeFaqId等于idA时，显示对应提示框 */}
          {activeFaqId === 'idA' && (
            <div>
              <FaqtipContent
                isOpen={true}
                content={<p>针对idA的FAQ内容</p>}
              />
            </div>
          )}
        </div>

        {/* 扩展更多按钮和提示框示例 */}
        <div>
          <Radio id='idB' label='AnotherLabel' />
          {FaqTipButton('idB')}
          {activeFaqId === 'idB' && (
            <div>
              <FaqtipContent
                isOpen={true}
                content={<p>针对idB的FAQ内容</p>}
              />
            </div>
          )}
        </div>
      </RadioGroup>
    </form>
  );
};

export default App;

关键改动说明 #

• 状态设计优化：从单个isOpen布尔值改为activeFaqId字符串/Null，精准控制每个按钮的激活状态
• 点击逻辑修正：每个按钮的点击事件只处理自身状态切换，避免循环调用setIsOpen的错误
• 组件命名修复：将按钮组件重命名为FaqTipButton，解决和内部FaqtipIcon的命名冲突
• 提示框显示逻辑：通过activeFaqId === 按钮ID的判断，确保只有当前点击的按钮对应的提示框显示，其他自动关闭
• 语法错误修复：补全JSX中未闭合的标签，保证代码可正常运行

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