React Table Tooltip - 在工具提示中使用另一个行值

Question

我有 ReactTable，它使用 ReactTooltip 并在工具提示中显示该行值的工具提示。但我想在该工具提示中显示另一行的值。我怎么能这样做？我的代码是：

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


     column=  [
           {
            Header: "Test1",
            accessor: "test1",
            minWidth: 150, 
          }, {
            Header: "Test2",
            accessor: "test2",
            minWidth: 120, 
            Cell: (props:any) => (
              <div>
                <span data-tip={true}  >
                  {props.value}
                </span>
                <ReactTooltip place="right"  >
                  //Here I want to show value of Test1
                </ReactTooltip>
              </div>
            ),
          }
        ]

我想显示另一行的 Test1 值。请给我建议。

Answer 1

您使用的 Cell 方法不仅仅是公开值，还有一个 row 属性，您可以在其中访问该行的所有值。您可以像

一样访问一行中的值

      {
        Header: "First Name",
        accessor: "firstName",
        Cell: ({ row,value }) => {
          console.log(row.values);
          return <b>{row.values["lastName"]}</b>;
        }
      },

我在此 URL 下设置了一个示例。

https://codesandbox.io/s/dank-brook-wd1go?file=/src/App.js