ReactTable使用ReactTooltip时如何在提示框展示其他行字段值

以下分两种常见场景给出实现代码，可按需选择：

场景1：Tooltip展示当前行的Test1字段值 #

ReactTable 的 Cell 渲染参数中自带 row 属性，row.original 对应当前行的完整原始数据，直接取值即可，修改后的列配置如下：

import * as React from 'react'
import ReactTooltip  from 'react-tooltip'

const column =  [
  {
    Header: "Test1",
    accessor: "test1",
    minWidth: 150, 
  }, {
    Header: "Test2",
    accessor: "test2",
    minWidth: 120, 
    Cell: (props:any) => (
      <div>
        {/* 加唯一id避免多个tooltip冲突 */}
        <span data-tip data-for={`test2-tooltip-${props.row.id}`}>
          {props.value}
        </span>
        <ReactTooltip 
          place="right" 
          id={`test2-tooltip-${props.row.id}`}
        >
          {/* 直接从当前行原始数据取test1字段 */}
          {props.row.original.test1}
        </ReactTooltip>
      </div>
    ),
  }
]

优化建议：不需要给每个单元格单独声明ReactTooltip组件，可以在表格外层全局声明一个ReactTooltip，通过data-tip属性传递要展示的内容，减少重复渲染：

// 列配置简化为
Cell: (props:any) => (
  <span data-tip={props.row.original.test1}>
    {props.value}
  </span>
)
// 表格组件外层加一个全局的ReactTooltip即可
<ReactTooltip place="right" />

场景2：Tooltip展示其他指定行的Test1字段值 #

如果需要取非当前行的字段值，需要先拿到表格的完整数据源（即你传给ReactTable的data参数），通过闭包引入到列配置中即可，示例如下：

// 假设你的表格数据存在state中
const [tableData, setTableData] = React.useState([])

// 定义column时直接引用tableData即可
const column =  [
  {
    Header: "Test1",
    accessor: "test1",
    minWidth: 150, 
  }, {
    Header: "Test2",
    accessor: "test2",
    minWidth: 120, 
    Cell: (props:any) => (
      <span data-tip={tableData[0]?.test1}>
        {props.value}
      </span>
    ),
  }
]

// 渲染表格的地方外层加全局Tooltip
return (
  <div>
    <ReactTable columns={column} data={tableData} />
    <ReactTooltip place="right" />
  </div>
)

上述示例中tableData[0]对应取第一行的Test1值，你可以根据自己的业务逻辑替换为目标行的索引即可。

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