React条件渲染：如何通过showA/showB控制组件A/B/C的显示？

这问题其实很好解决，核心就是根据showA和showB的布尔组合来做分支判断，我先帮你梳理清楚逻辑边界，再拿React（最常见的组件场景）举几个实际代码例子，你一看就明白：

先明确逻辑分支 #

我们把需求拆解成三个互斥的条件：

• 当showA 且 showB都为false → 渲染组件C
• 仅showA为true（也就是showB为false）→ 渲染组件A
• 仅showB为true（也就是showA为false）→ 渲染组件B

代码实现示例（React） #

方式1：函数组件内用if-else判断（可读性最高）

这种写法逻辑清晰，适合复杂一点的分支判断：

// 假设ComponentA、ComponentB、ComponentC都是已定义好的组件
function ParentComponent({ showA, showB }) {
  // 先判断双false的情况
  if (!showA && !showB) {
    return <ComponentC />;
  }
  // 仅showA为true
  else if (showA && !showB) {
    return <ComponentA />;
  }
  // 仅showB为true
  else if (showB && !showA) {
    return <ComponentB />;
  }
  
  // 兜底：如果出现showA和showB同时为true的情况，这里可以自定义处理
  // 比如返回null、提示信息，或者默认渲染C
  return <ComponentC />;
}

方式2：JSX内嵌套三元运算符（适合内联渲染）

如果需要在现有JSX结构中直接插入这段逻辑，可以用嵌套的三元表达式：

function ParentComponent({ showA, showB }) {
  return (
    <div className="container">
      {/* 其他固定内容 */}
      <h1>页面标题</h1>
      
      {/* 分支渲染逻辑 */}
      {!showA && !showB ? (
        <ComponentC />
      ) : showA && !showB ? (
        <ComponentA />
      ) : showB && !showA ? (
        <ComponentB />
      ) : (
        // 同样处理双true的兜底情况
        <div>无法同时显示A和B</div>
      )}
    </div>
  );
}

额外提醒 #

如果你的业务场景中有可能出现showA和showB同时为true的情况，一定要提前明确这个分支的处理规则（比如优先显示A、显示错误提示，或者都不渲染），上面的代码里已经预留了兜底位置，你可以根据需求调整。

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