React-Bootstrap-Table动态链接传值问题咨询

当然可行！我之前也碰到过类似的需求，不管你用的是旧版react-bootstrap-table还是新版的react-bootstrap-table-next，都能通过自定义单元格渲染来实现插入Link并传递数据到第二个组件的功能，完全不用放弃你偏好的这个组件～

新版：react-bootstrap-table-next（推荐使用） #

新版本的组件用formatter属性来实现自定义单元格内容，刚好能把Link组件嵌进去，同时把当前行的数据传递出去。

步骤1：导入所需组件 #

import BootstrapTable from 'react-bootstrap-table-next';
import { Link } from 'react-router-dom'; // 假设你用react-router做路由跳转
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';

步骤2：定义单元格格式化函数 #

这个函数会接收当前单元格的值（cell）和整行的数据（row），你可以利用row拿到需要传递的所有字段：

const linkFormatter = (cell, row) => {
  // 方式1：通过路由参数传递数据
  return (
    <Link to={`/your-second-component/${row.id}`}>
      {cell} {/* 显示单元格原本的内容，比如项目名称 */}
    </Link>
  );

  // 方式2：通过路由state传递整行数据（适合需要多字段的场景）
  // return (
  //   <Link 
  //     to={{ 
  //       pathname: '/your-second-component', 
  //       state: { rowData: row } 
  //     }}
  //   >
  //     {cell}
  //   </Link>
  // );
};

步骤3：配置表格列并使用formatter #

在你的列配置中，给需要变成Link的列加上formatter属性：

const columns = [
  {
    dataField: 'name',
    text: '项目名称',
    formatter: linkFormatter // 绑定自定义格式化函数
  },
  {
    dataField: 'id',
    text: '项目ID'
  }
];

步骤4：渲染表格 #

把从服务器拿到的数据传入表格组件：

<BootstrapTable 
  keyField='id' // 必须指定唯一标识字段
  data={yourServerData} // 服务器返回的映射后的数据
  columns={columns}
/>

旧版：react-bootstrap-table（v1） #

如果还在使用旧版组件，逻辑类似，只是用dataFormat属性来定义格式化函数：

import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import { Link } from 'react-router-dom';

// 同样定义格式化函数
const linkFormatter = (cell, row) => {
  return (
    <Link to={`/your-second-component/${row.id}`}>
      {cell}
    </Link>
  );
};

// 渲染表格
<BootstrapTable data={yourServerData}>
  <TableHeaderColumn 
    dataField='name' 
    dataFormat={linkFormatter}
  >
    项目名称
  </TableHeaderColumn>
  <TableHeaderColumn dataField='id'>项目ID</TableHeaderColumn>
</BootstrapTable>

额外需求：整行点击跳转 #

如果需要点击整行任何位置都跳转到第二个组件，可以用rowEvents属性（仅新版支持）：

import { useHistory } from 'react-router-dom';

// 在组件内获取history对象
const history = useHistory();

const rowEvents = {
  onClick: (e, row, rowIndex) => {
    // 点击整行时跳转并传递数据
    history.push({
      pathname: '/your-second-component',
      state: { rowData: row }
    });
  }
};

// 表格中添加rowEvents属性
<BootstrapTable 
  keyField='id'
  data={yourServerData}
  columns={columns}
  rowEvents={rowEvents}
/>

接收数据的第二个组件 #

如果用路由state传递数据，在第二个组件里可以这样获取：

import { useLocation } from 'react-router-dom';

const SecondComponent = () => {
  const location = useLocation();
  const rowData = location.state?.rowData; // 注意可选链避免报错

  return (
    <div>
      <h1>接收的数据：</h1>
      <p>项目名称：{rowData?.name}</p>
      <p>项目ID：{rowData?.id}</p>
    </div>
  );
};

内容的提问来源于stack exchange，提问作者Dženis H.