如何实现两个无关联的垂直对齐组件布局（React/Reactstrap）

问题描述 #

需要实现两个垂直排列的独立列，可根据条件仅向左列或右列注入组件，左右列数据相互独立，但现有代码无法达成该效果。

无效代码示例 #

export default function Home() {
  return (
    <>
      <Container>
        <Row>
          <Row>
            <Col>col</Col>
          </Row>
          <Row>
            <Col>col</Col>
          </Row>
        </Row>
      </Container>
    </>
  );
}

解决方案 #

1. 修正布局结构 #

原代码错误在于Row嵌套Row，导致横向容器重复。正确的双列结构应该是单个Row下包含两个Col，每个Col作为独立的垂直容器。

2. 实现条件注入组件 #

通过条件判断控制组件是否渲染到对应列，确保左右列数据隔离。

完整示例代码

import { Container, Row, Col } from 'reactstrap';
// 引入需注入的组件
import LeftOnlyComponent from './LeftOnlyComponent';
import RightOnlyComponent from './RightOnlyComponent';

export default function Home() {
  // 模拟业务条件，可根据实际场景动态赋值
  const injectToLeft = true;
  const injectToRight = false;

  return (
    <Container>
      <Row>
        {/* 左垂直列：独立容器 */}
        <Col xs={6} className="d-flex flex-column">
          {/* 条件注入左列组件 */}
          {injectToLeft && <LeftOnlyComponent />}
          {/* 左列固定内容 */}
          <div>左列基础内容</div>
        </Col>

        {/* 右垂直列：独立容器 */}
        <Col xs={6} className="d-flex flex-column">
          {/* 条件注入右列组件 */}
          {injectToRight && <RightOnlyComponent />}
          {/* 右列固定内容 */}
          <div>右列基础内容</div>
        </Col>
      </Row>
    </Container>
  );
}

3. 核心要点 #

• 列宽度控制：xs={6} 确保移动端及以上屏幕均为等宽双列，若需仅在大屏显示双列，可改用md={6}。
• 垂直排列保障：d-flex flex-column 让列内元素垂直分布，符合垂直列需求。
• 独立数据管理：左右列的组件、状态可完全分离，互不影响，如需共享数据可通过props或状态管理工具传递。
• 条件渲染灵活：injectToLeft/injectToRight 可替换为接口返回值、组件状态等动态条件，实现按需注入。

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