react-table v6 多表问题

【问题标题】：react-table v6 multiple tables issuesreact-table v6 多表问题
【发布时间】：2022-10-25 00:36:59
【问题描述】：

再会我有 2 个并排的表，我希望它们像一个带边框的表并独立滚动，当我的光标越过第一个表中的 1 行时，我想突出显示第二个表中的 1 行然而，这是由 react-table 在内部完成的。任何解决方案如何实现从两个表中突出显示同一行？我想知道同时垂直滚动，反应方式也有解决方案吗？

不想将事件侦听器添加到这样的表中

        firstTableBody.addEventListener('scroll', e => {
            const tablePosition = e.target.scrollTop;
            firstTableBody.scrollTop = tablePosition;
        });

https://stackblitz.com/edit/react-edgooj?file=src/App.js

【问题讨论】：

标签： javascript reactjs react-table

【解决方案1】：

好的，我一次为所有表格做了一个突出显示

对于我添加的每张桌子

getTrProps={rowProps}

在rowProps 我实现

const rowProps = useCallback((state, rowInfo) => {
    if (rowInfo && rowInfo.row) {
        const isRowHovered = rowInfo.index === hoveredRow;
        return {
            style: {
                background: isRowHovered ? '#D1DDE1' : ''
            },
            onMouseEnter: () => {
                setHoveredRow(rowInfo.index)
            },
            onMouseLeave: () => {
                setHoveredRow(null)
            }
        }
    }
}, [hoveredRow]);

我真的不知道为什么在所有这些库中总是有这么差的文档

【讨论】：