React双Panel点击切换功能实现问题排查求助

DevOps 小满

2026-10-3

问题原因

核心逻辑错误出现在Panel组件的点击回调设置：两个Panel点击隐藏状态时，都只会执行setActive(false)，没有匹配对应Panel需要的父组件状态值，导致第一次切换后无法再次切回。
具体运行流程验证：

初始状态父组件active = true，Panel1（active=true可见）、Panel2（active=false隐藏）
点击Panel2，触发setActive(false)，父组件active变为false，Panel2显示、Panel1隐藏，第一次切换正常
此时点击隐藏的Panel1，Panel1的active为false，仍触发setActive(false)，父组件状态无变化，切换失效

修正方案

推荐通过父组件给每个Panel传递独立的状态更新回调，避免状态匹配错误：

修改 Content.jsx

给两个Panel分别传递对应激活时的状态更新函数：

import React, { useState } from "react";
import Panel from "../panel/Panel";
import "./content.styles.css";

const Content = ({ selected, panelA, panelB }) => {
  const [active, setActive] = useState(true);

  return (
    <div className={`content-wrapper ${selected ? "visible" : "hidden"}`}>
      {/* 激活Panel1时将父active设为true */}
      <Panel active={active} panelText={panelA} onActive={() => setActive(true)} />
      {/* 激活Panel2时将父active设为false */}
      <Panel active={!active} panelText={panelB} onActive={() => setActive(false)} />
    </div>
  );
};

export default Content;

修改 Panel.jsx

调整点击回调逻辑，仅在当前未激活时调用传入的激活回调：

import React from "react";
import "./panel.styles.css";

const Panel = ({ panelText, active, onActive }) => {
  const handleClick = () => {
    // 仅隐藏状态点击时触发激活
    if(!active){
      onActive();
    }
  };

  return (
    <div
      onClick={handleClick}
      className={`panel-wrapper ${
        active ? "active-component" : "hidden-component"
      }`}
    >
      {panelText}
    </div>
  );
};

export default Panel;