React-virtualized MultiGrid 行 - 悬停 css答案

【问题标题】：React-virtualized MultiGrid row - hover cssReact-virtualized MultiGrid 行 - 悬停 css
【发布时间】：2019-07-24 09:22:58
【问题描述】：

是否可以在 MultiGrid 组件中使用 CSS 更改悬停时的行背景颜色？正如我所看到的，行级别上没有 div。所有单元格都处于同一级别。 Table 组件有 rowClassName 属性，但 MultiGrid 没有

【问题讨论】：

标签： reactjs react-virtualized

【解决方案1】：

通过获取下一个和上一个元素兄弟并添加“行悬停”类名来解决它。

const CLASSNAME = 'row-hover';

const hoverLeftSide = (e, shouldHover) => {
    const prevEl = e.previousElementSibling;
    const prevInSameRow = prevEl && e.style.top === prevEl.style.top;

    if (prevInSameRow) {
        if (shouldHover) {
            prevEl.classList.add(CLASSNAME);
        } else {
            prevEl.classList.remove(CLASSNAME);
        }
    
        hoverLeftSide(prevEl, shouldHover);
    }

}

const hoverRightSide = (e, shouldHover) => {
    const nextEl = e.nextElementSibling;
    const nextInSameRow = nextEl && e.style.top === nextEl.style.top;

    if (nextInSameRow) {
        if (shouldHover) {
            nextEl.classList.add(CLASSNAME);
        } else {
            nextEl.classList.remove(CLASSNAME);
        }
    
        hoverRightSide(nextEl, shouldHover);
    }
}

const hoverRow = (e, shouldHover) => {
    if (shouldHover) {
        e.currentTarget.classList.add(CLASSNAME);
    } else {
        e.currentTarget.classList.remove(CLASSNAME);
    }

    hoverLeftSide(e.currentTarget, shouldHover);
    hoverRightSide(e.currentTarget, shouldHover);
}

export default hoverRow;

// import hoverRow from './hoverRow';
//
// return (
//     <div
//         onMouseOver={(e) => hoverRow(e, true)}
//         onMouseOut={(e) => hoverRow(e, false)}
//     >
//         {children}
//     </div>
// )

【讨论】：

【解决方案2】：

您可以为单元格添加一个类名，然后使用纯 css。例如：

<MultiGrid  
     {...this.state}
     ref={this.grid}
     cellRenderer={_cellRenderer}
     columnWidth={_getColumnWidth}
     columnCount={rows[0].length}
     height={1024}
     rowHeight={_getColumnHeight}
     rowCount={rows.length}
     width={width}
     styleTopRightGrid={STYLE_TOP_RIGHT_GRID}/>

如您所见，MultiGrid 使用 _cellRenderer：

const _cellRenderer = ({columnIndex, key, rowIndex, style}) => {
    return(
             <div className="cell">
                 {row[rowIndex][columnIndex]}
             </div>
    );
})

在你的CSS中你可以添加：

.cell:hover {
    background-color: yellow;
 }

【讨论】：

这样只有单元格会改变它的颜色，而不是一行

【解决方案3】：

看看https://github.com/techniq/mui-virtualized-table/

它在内部使用 MultiGrid。

根据您的用例，您可以直接使用它，也可以复制它处理悬停的方式，即它使用一个函数来计算单元格是否应该具有悬停效果，然后对其应用特定样式.您无需手动应用 :hover 选择器，只需编辑该样式即可。

【讨论】：