Добавить разрыв между элементами при использовании React Virtualized - PullRequest
Новая
       38

Добавить разрыв между элементами при использовании React Virtualized

0 голосов
/ 26 декабря 2018

Я использую React-Virtualized для создания бесконечного списка отложенной загрузки.

https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md

Однако я не могу создать разрыв между визуализированными элементами div, поскольку они абсолютно позиционированы, а top рассчитывается динамически.

попробовал следующее, однако не повезло.Любые идеи о том, как добавить этот разрыв между каждым элементом?Спасибо! 

<AutoSizer disableHeight>
   {({width}) => (
              <List
                onRowsRendered={onRowsRendered}
                ref={registerChild}
                rowCount={rowCount}
                rowRenderer={rowRenderer}
                width={width - 30}
                rowHeight={175}
                height={this.state.height - 64}
                style={{
                  paddingTop: 15,
                  boxSizing: 'content-box',
                }}
                containerStyle={{
                  position: 'relative',
                  overflow: 'visible',
                }}
              />
    )}
</AutoSizer>

1 Ответ

0 голосов
/ 26 декабря 2018

В итоге я решил проблему с заполнением, добавив div внутри CellMeasurer в качестве родительского контейнера для обеспечения заполнения.

Div - это контейнер с абсолютным позиционированием, тогда как карта заполнена и показывает тень блока. 

<CellMeasurer
      cache={this.cache}
      columnIndex={0}
      key={key}
      rowIndex={index}
      parent={parent}
    >
      {({ measure }) => (
        <div
          className={s.listItem}
          style={style}
          onLoad={measure}
          key={index}>
            <Card>
...