React弹窗表格数据迁移界面不显示已解决，求表格并排布局方案

问题背景 #

开发了一个基于Reactstrap的弹窗组件，点击按钮可打开弹窗。弹窗内需要放置两个并排表格：

• 右侧表格初始包含数据，每行有三列，最后一列是Move按钮，点击可将对应行迁移至左侧表格
• 最初遇到问题：迁移的数据在控制台可见，但左侧表格界面无法显示，排查后发现是<div className="d-flex">导致的
• 删除d-flex类后数据能正常显示，但两个表格变成上下排列，需要保持并排效果

解决方法 #

问题根源是d-flex直接包裹表格时，会改变容器的渲染上下文，导致React无法正确检测左侧表格的状态更新。改用Bootstrap的网格布局（row + col）来实现并排，同时确保每个表格有独立的容器，让React能正常触发DOM更新。

修改后的完整代码 #

import React, { useState } from "react";
import { Modal, ModalHeader, ModalBody, Table, Button } from "reactstrap";

const Popup = ({ procedureCatergory, isOpen, toggle }) => {
  const [rightTableData, setRightTableData] = useState([...procedureCatergory]);
  const [leftTableData, setLeftTableData] = useState([]);

  const moveToLeftTable = (item) => {
    setRightTableData((prevRightTableData) =>
      prevRightTableData.filter((data) => data.value !== item.value)
    );
    setLeftTableData((prevLeftTableData) => [...prevLeftTableData, item]);
  };

  const moveToRightTable = (item) => {
    setLeftTableData((prevLeftTableData) =>
      prevLeftTableData.filter((data) => data.value !== item.value)
    );
    setRightTableData((prevRightTableData) => [...prevRightTableData, item]);
  };

  return (
    <Modal isOpen={isOpen} toggle={toggle}>
      <ModalHeader>Popup</ModalHeader>
      <ModalBody>
        {/* 用Bootstrap row和col-6实现左右分栏，每个表格占一半宽度 */}
        <div className="row">
          <div className="col-6">
            <Table>
              <thead>
                <tr>
                  <th>#</th>
                  <th>Name</th>
                  <th>action</th>
                </tr>
              </thead>
              <tbody>
                {rightTableData.map((item) => (
                  <tr key={item.value}>
                    <th scope="row">{item.value}</th>
                    <td>{item.label}</td>
                    <td>
                      <Button onClick={() => moveToLeftTable(item)}>Move</Button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </Table>
          </div>
          <div className="col-6">
            <Table>
              <thead>
                <tr>
                  <th>#</th>
                  <th>Name</th>
                  <th>action</th>
                </tr>
              </thead>
              <tbody>
                {leftTableData.map((item) => (
                  <tr key={item.value}>
                    <th scope="row">{item.value}</th>
                    <td>{item.label}</td>
                    <td>
                      <Button onClick={() => moveToRightTable(item)}>Move</Button>
                    </td>
                  </tr>
                ))}
              </tbody>
            </Table>
          </div>
        </div>
      </ModalBody>
    </Modal>
  );
};

export default Popup;

方案说明 #

1. 使用Bootstrap的row容器作为父级，两个表格分别放在col-6容器内，自动实现左右并排，各占弹窗宽度的50%
2. 每个表格被独立的列容器包裹，React能够正确监测到leftTableData的状态变化，及时更新左侧表格的内容
3. 完全规避了d-flex直接包裹表格带来的渲染上下文冲突问题，同时满足并排显示的需求

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