react-virtualized und react-custom-scrollbars integration

Ich versuche, eine benutzerdefinierte Bildlaufleiste (mit react-custom-Bildlaufleisten: https://github.com/malte-wessel/react-custom-scrollbars) für eine Grid-Komponente (react-virtualisiert) zu integrieren.react-virtualized und react-custom-scrollbars integration

Ich habe versucht, Anweisungen aus diesem GitHub-Problem zu folgen (https://github.com/bvaughn/react-virtualized/issues/143), aber es gab kein Glück.

Jeder Einblick in die Verwendung dieser beiden Bibliotheken zusammen würde wirklich geschätzt werden!

Update: nach der Suche in gitter Raum reaktiviert-virtualisiert, ich folgte einem Vorschlag, dass mit perfekter Scrollbar-Paket (anstelle von reagieren-custom-Scrollbars) und reagieren-virtualisiert zusammen. Sie funktionieren bisher gut.

Quelle

2016-12-14 make2514

alle Links auf, wie benutzerdefinierte Scrollbar zu erreichen mit reagieren virtualisierten, bitte? –

Ich versuche das Gleiche mit der List-Komponente zu tun. Hast du Informationen darüber, wie du sie zur Zusammenarbeit gebracht hast? –

Sie können Grid in react-custom-scrollbars einbinden und onScroll-Ereignis übergeben. Dieser Code funktioniert für mich.

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') 
);

Sie können beispielsweise mit Liste sehen und etwas mehr Kontext in github issue

Quelle

2017-11-20 07:06:09

react-virtualized und react-custom-scrollbars integration

Antwort

Verwandte Themen