react-virtualized 和 react-custom-scrollbars 集成

Question

我正在尝试为 Grid 组件（使用 react-virtualized）集成自定义滚动条（使用 react-custom-scrollbars：https://github.com/malte-wessel/react-custom-scrollbars）。

我尝试按照这个 github 问题 (https://github.com/bvaughn/react-virtualized/issues/143) 的说明进行操作，但没有成功。

非常感谢您对结合使用这两个库的任何见解！

更新：在 react-virtualized 的 gitter room 中搜索后，我遵循了一个建议，即使用完美滚动条包（而不是 react-custom-scrollbars）和 react-virtualized 一起使用。到目前为止，它们运行良好。

Answer 1

您可以将 Grid 包装在 react-custom-scrollbars 中并传递 onScroll 事件。这段代码对我有用。

import React from 'react';
import { Grid } from 'react-virtualized';
import { Scrollbars } from 'react-custom-scrollbars';

class ScrollableGrid extends React.Component {
    handleScroll = ({ target }) => {
        const { scrollTop, scrollLeft } = target;

        this.Grid.handleScrollEvent({ scrollTop, scrollLeft });
    };

    Grid = null;

    render() {
        const { width, height } = this.props;

        return (
            <Scrollbars autoHide style={{ width, height }} onScroll={this.handleScroll}>
                <Grid
                    {...this.props}
                    ref={instance => (this.Grid = instance)}
                    style={{
                        overflowX: false,
                        overflowY: false
                    }}
                />
            </Scrollbars>
        );
    }
}

const list = [
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125],
    ['Brian Vaughn', 'Software Engineer', 'San Jose', 'CA', 95125]
];

ReactDOM.render(
    <ScrollableGrid
        cellRenderer={({ columnIndex, key, rowIndex, style }) => {
            return (
                <div key={key} style={style}>
                    {list[rowIndex][columnIndex]}
                </div>
            );
        }}
        columnCount={list[0].length}
        columnWidth={100}
        height={300}
        rowCount={list.length}
        rowHeight={30}
        width={300}
    />,
    document.getElementById('example')
);

您可以查看 List 示例和更多上下文 in github issue