React.js中如何通过DataTable展示选中行的信息

核心思路是把选中行的数据传递给模态框，让模态框内的DataTable仅使用该数据渲染，具体步骤如下：

1. 在表格组件中维护选中行的状态 #

在包含表格的父组件里，添加状态变量存储当前选中行的数据，点击按钮时把对应行的数据存入该状态，并打开模态框。

示例代码（假设使用react-data-table-component）：

import { useState } from 'react';
import DataTable from 'react-data-table-component';
import DetailModal from './DetailModal';

const MainTable = () => {
  const [showModal, setShowModal] = useState(false);
  const [currentRow, setCurrentRow] = useState(null);
  // 你的全量数据集
  const allData = [
    { id: 1, name: '张三', age: 25 },
    { id: 2, name: '李四', age: 30 },
  ];

  // 表格列配置，第一列是触发按钮
  const columns = [
    {
      name: '操作',
      cell: (row) => (
        <button onClick={() => {
          setCurrentRow(row);
          setShowModal(true);
        }}>查看详情</button>
      ),
    },
    { name: 'ID', selector: row => row.id },
    { name: '姓名', selector: row => row.name },
  ];

  return (
    <>
      <DataTable columns={columns} data={allData} />
      <DetailModal 
        visible={showModal} 
        onClose={() => setShowModal(false)} 
        rowData={currentRow} 
      />
    </>
  );
};

export default MainTable;

2. 模态框组件接收并使用选中行数据 #

在模态框组件中，接收父组件传递的选中行数据，将其转为DataTable需要的数组格式（如果是单条数据），然后渲染表格。

示例代码：

import DataTable from 'react-data-table-component';

const DetailModal = ({ visible, onClose, rowData }) => {
  if (!visible) return null;

  // 把单条数据转为数组，适配DataTable的data属性要求
  const tableData = rowData ? [rowData] : [];

  // 模态框内表格的列配置（可根据需求自定义）
  const modalColumns = [
    { name: 'ID', selector: row => row.id },
    { name: '姓名', selector: row => row.name },
    { name: '年龄', selector: row => row.age },
  ];

  return (
    <div style={{ 
      position: 'fixed', 
      top: 0, 
      left: 0, 
      width: '100%', 
      height: '100%', 
      background: 'rgba(0,0,0,0.5)',
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center'
    }}>
      <div style={{ background: 'white', padding: '20px', borderRadius: '8px' }}>
        <button onClick={onClose} style={{ marginBottom: '10px' }}>关闭</button>
        <DataTable columns={modalColumns} data={tableData} />
      </div>
    </div>
  );
};

export default DetailModal;

注意事项 #

• 如果是多选场景，只需把父组件的currentRow改为数组状态（比如selectedRows），点击按钮时传入选中的行数组即可，模态框内直接使用该数组作为DataTable的数据源。
• 若使用Ant Design、MUI等UI库的模态框组件，传递数据的逻辑完全一致，只需将rowData作为props传给模态框的内容部分。
• 可在模态框关闭时清空currentRow状态，避免下次打开时残留旧数据。

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