react-data-table-component父行配置不同展开组件与数据的方法

1. 获取当前展开行数据实现内容匹配 #

你不需要手动做额外的数据透传，该组件默认会自动向expandableRowsComponent指定的自定义组件注入当前展开行的上下文属性，其中data字段就是当前点击展开行的完整原始数据，直接在自定义组件内读取该属性即可实现行和展开内容的一一对应。
基础实现代码示例：

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

// 展开内容组件
const RowDetail = ({ data }) => {
  // data 对应当前展开行的所有字段，直接使用即可
  return <div className="p-4 bg-gray-50">This is row {data.id}</div>;
};

const TableDemo = () => {
  const tableData = [
    { id: 1, title: '第一行业务数据' },
    { id: 2, title: '第二行业务数据' }
  ];
  const columns = [/* 你的表格列配置 */];

  return (
    <DataTable
      columns={columns}
      data={tableData}
      expandableRows={true}
      expandableRowsComponent={RowDetail}
    />
  );
};

如果需要给展开组件传入表格外的自定义业务参数，建议用useCallback包装组件或者用高阶组件传参，避免直接在JSX里写匿名函数导致不必要的重渲染。

2. 为不同行渲染不同的展开组件 #

该组件本身不支持逐行传入expandableRowsComponent属性，不需要修改源码或者找特殊配置，只需要写一个统一的分发包装组件作为expandableRowsComponent传入，在包装组件内部根据当前行的业务字段、唯一标识判断需要渲染的具体详情组件即可，实现成本极低。
代码示例：

// 不同业务场景对应的专属详情组件
const OrderExpendContent = ({ data }) => {
  return <div>订单详情：订单编号{data.orderNo}，金额{data.amount}</div>;
};
const UserExpendContent = ({ data }) => {
  return <div>用户详情：用户名{data.userName}，注册时间{data.registerTime}</div>;
};
const CommonExpendContent = ({ data }) => {
  return <div>通用详情：行ID{data.id}</div>;
};

// 统一分发组件
const ExpandContentDispatcher = (props) => {
  const { data } = props;
  // 根据当前行的业务类型字段判断渲染哪个组件
  switch(data.bizType) {
    case 'order':
      return <OrderExpendContent {...props} />;
    case 'user':
      return <UserExpendContent {...props} />;
    default:
      return <CommonExpendContent {...props} />;
  }
};

// 表格配置处只需要传入分发组件即可
<DataTable
  columns={columns}
  data={tableData}
  expandableRows={true}
  expandableRowsComponent={ExpandContentDispatcher}
  // 可选配置：如果要禁止某些行展开，可以指定行内的标记字段
  expandableRowsDisabledField="isExpandDisabled"
/>

补充说明 #

展开组件默认接收到的常用props除了data之外，还包含：

• index：当前行在表格数据里的索引值
• disabled：当前行是否被禁止展开
• expanded：当前行是否处于展开状态
  可以根据实际业务需求直接取用这些属性，不需要额外透传。

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