反應虛擬化和反應 - 自定義滾動條集成

我想（用反應 - 自定義滾動條：https://github.com/malte-wessel/react-custom-scrollbars）集成的自定義滾動條的網格組件（使用反應虛擬化）。反應虛擬化和反應 - 自定義滾動條集成

我試圖從這個github上的問題（https://github.com/bvaughn/react-virtualized/issues/143）遵循指令，但一直沒有運氣。

任何有關使用這兩個庫的意見將非常感激！

更新：在反應虛擬化的小膠質房間進行搜索後，我跟着一個建議，使用完美 - 滾動包（而不是反應 - 自定義滾動條）和應對虛擬化一起。迄今爲止，它們運行良好。

來源

2016-12-14 make2514

如何來與虛擬化的資源，請聯繫定製滾動條的任何鏈接？ –

我正在嘗試使用List組件做同樣的事情。你有關於如何讓他們一起工作的任何信息？ –

可以在反應 - 自定義滾動條包裹電網和傳承下去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

來源

2017-11-20 07:06:09

反應虛擬化和反應 - 自定義滾動條集成

回答

相關問題