React（TypeScript）中如何将两个渲染逻辑合并到单个条件判断中？

首先你的代码存在一个无效逻辑：第一个expandGraph判断块里定义了StageGrid函数组件，但既没调用它，也没返回JSX内容，这部分完全不会渲染出网格线。先修正这个问题，再用Fragment合并两个条件判断，实现你要的效果：

修正合并后的代码：

{expandGraph && (
  <>
    {/* 绘制网格虚线 */}
    {Array.from(Array(8).keys()).map((y) =>
      Array.from(Array(15).keys()).map((x) => (
        <Line
          key={`grid-${x}-${y}`}
          x={x * 7}
          y={y * (graphHeight / 6) + 1}
          strokeWidth={1}
          stroke={'#DBDBDB'}
          points={[0, 0, 3.5, 0]}
        />
      ))
    )}

    {/* 绘制下划线 */}
    {Array.from(Array(15).keys()).map((x) => (
      <div key={`line-group-${x}`}>
        <Line
          key={`bottom-line-${x}`}
          x={x * 7}
          y={graphHeight / 2 + 1}
          strokeWidth={1}
          stroke={'#000000'}
          points={[0, 0, 3.5, 0]}
        />
        <Line
          key={`top-line-${x}`}
          x={x * 7}
          y={1.3}
          strokeWidth={1}
          stroke={'#000000'}
          points={[0, 0, 3.5, 0]}
        />
      </div>
    ))}
  </>
)}

关键说明： #

• Fragment合并逻辑：用<>和</>（React Fragment的短语法）包裹两个渲染模块，这样不需要额外的DOM容器，就能在同一个expandGraph条件下渲染多组元素，避免重复写条件判断。
• 修正无效渲染：直接把原StageGrid内部的map逻辑提取出来，确保网格线能正常渲染——原代码里定义了组件却不调用，相当于白写了。
• 唯一Key优化：给所有列表元素的key加上了模块前缀（比如grid-、bottom-line-），避免不同模块的key重复，符合React对列表元素key的唯一性要求。

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