react 虚拟化和 react 自定义滚动条集成

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 中搜索后，我遵循了一个建议，即使用 perfect-scrollbar 包(而不是 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