React中如何实现点击两个按钮独立切换显示对应内容？

你的代码存在三类核心问题导致交互异常：

• JSX结构语法错误：首个<main>标签未正常闭合，标签层级中多了无匹配开标签的</div>，DOM结构错乱会直接导致事件绑定、渲染逻辑执行异常，这也是第二个按钮点击无响应的核心原因。
• 显隐逻辑交叉耦合：两个内容区块的外层容器显隐判断绑定了错误的状态——第一个内容容器的display属性用showSecond控制，第二个内容容器的display属性用showFirst控制，两个状态互相干扰，点击第一个按钮时会同时影响两个容器的显示状态，根本无法实现独立切换。
• 存在冗余显隐判断：外层div用行内样式控制显隐，内层又用&&做条件渲染，两层判断叠加很容易出现逻辑冲突。

import { useState } from 'react';
// 注意提前引入项目中已封装的Wrapper、Link、Button组件
function Update() {
  const [showFirst, setShowFirst] = useState(false);
  const [showSecond, setShowSecond] = useState(false);
  
  return (
    <Wrapper>
      <main>
        <h3>CHANGE FACILITY</h3>
        <div style={{ display: "flex", justifyContent: "space-between"}}>
          <Link onClick={() => setShowFirst(prev => !prev)}>
            First content
          </Link>
          <Button onClick={() => setShowSecond(prev => !prev)}>
            Second content
          </Button>
        </div>

        {/* 第一块内容仅受showFirst状态控制，和第二块状态完全解耦 */}
        {showFirst && (
          <div>
            <h3>1st facility</h3>
          </div>
        )}

        {/* 第二块内容仅受showSecond状态控制，和第一块状态完全解耦 */}
        {showSecond && (
          <div>
            <h3>2nd facility</h3>
          </div>
        )}
      </main>
    </Wrapper>
  );
}

• 两个按钮的点击逻辑完全独立，点击任意按钮只会切换自身对应内容的显隐，不会干扰另一块内容的状态。
• 支持任意状态组合：可以单独显示第一块、单独显示第二块、两块同时显示、两块同时隐藏，完全匹配预期交互。
• 状态更新改用函数式写法setShowFirst(prev => !prev)，避免React状态批量更新时可能出现的闭包陷阱，状态更新更可靠。

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