反応仮想化と反応カスタムスクロールバーの統合

Question

グリッドコンポーネント（反応仮想化を使用）に対してカスタムスクロールバー（反応カスタムスクロールバーを使用して：https://github.com/malte-wessel/react-custom-scrollbars）を統合しようとしています。

私はこのgithubの問題（https://github.com/bvaughn/react-virtualized/issues/143）からの指示に従おうとしましたが、運がありませんでした。

これらの2つのライブラリを一緒に使用することについての洞察は、本当に感謝しています！

更新：反応仮想化のジッタールームを検索した後、（反応カスタムスクロールバーの代わりに）完璧なスクロールバーパッケージを使用し、一緒に反応仮想化するという1つの提案に従った。彼らは今のところうまく働いています。

Answer 1

反応カスタムスクロールバーでグリッドをラップし、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') 
); 

あなたはリストといくつかのより多くのコンテキストin github issue