0

我有一个react-table表（为方便起见包装在自定义Table组件中），其中最后一列包含按钮。这些操作支持react-tooltip工具提示。

<div>
   {/* React-Tooltip defined above the table */}
   <ReactTooltip place="top" type="dark" effect="solid" />
    {/* This is the React-Table wrapper component */}
   <Table columns={columns} data={dataList} />
</div>

在 Action 列中，正确获取data-tip了按钮的工具提示，

<Button variant="outline-secondary" size="sm" className="btn-slim" title="View" data-tip='View'>View</Button>

当我最初在表格的第 1 页时，React-Tooltip 有效（如下图黑色所示）。我看到黑色工具提示和白色默认“alt”框。

在此处输入图像描述

但是一旦我导航到不同的页面，React-Tooltip 就会停止工作：

在此处输入图像描述

甚至当我回到原来的第 1 页时，它也不再起作用了：

在此处输入图像描述

React-Table 包装器实现取自https://react-table.tanstack.com/docs/overview示例。本质上它具有结构

  const { 
     ...
      } = useTable(
        {
          columns,
          data,
          initialState: { pageIndex: 0 },
        },
        useGlobalFilter, // useGlobalFilter!
        useSortBy,
        usePagination
      )

 <BTable striped bordered {...getTableProps()}>
 </BTable>
4

0 回答 0