Блог

Я использую react-virtualized для визуализации бесконечный свиток столбцов с несколькими строками, и каждая строка может отличаться по высоте, но по большей части они будут одинаковыми.

Моя проблема в том, что если один элемент в ряду имеет большую высоту, чем другие, он будет отрезан.

Смотрите скриншот, вы можете видеть нижнюю границу, скрытую в строке с большей высотой.

Я действительно не уверен в том, как справиться с этой возможностью.

Мой компонент довольно большой, поэтому не хочу помещать все это здесь, но у меня есть

CodeSandbox

 return (
  <div ref={gridRef}>
    <AutoSizer disableHeight>
      {({ width: rowWidth }: Dimensions) => {
        // counts number of columns to be rendered
        const columnTotal = getRowsAmount(
          rowWidth,
          results.length,
          totalResults > results.length
        );

        return (
          <InfiniteLoader
            ref={infiniteLoaderRef}
            rowCount={columnTotal}
            isRowLoaded={({ index }: Index) => {
              // logic to check if row is loaded
            }}
            loadMoreRows={() => loadMoreResults()}
          >
            {({ onRowsRendered }: InfiniteLoaderChildProps) => (
              <WindowScroller>
                {({
                  height,
                  onChildScroll,
                  scrollTop,
                  registerChild
                }: WindowScrollerChildProps) => (
                  <div ref={registerChild}>
                    <List
                      autoHeight
                      overscanRowCount={getOverScan()}
                      height={height}
                      width={rowWidth}
                      scrollingResetTimeInterval={0}
                      rowCount={columnTotal}
                      scrollTop={scrollTop}
                      rowHeight={itemHeight} // I think I need to possibly have a function here but not sure what to do?
                      onRowsRendered={onRowsRendered}
                      onScroll={onChildScroll}
                      rowRenderer={({
                        index,
                        style,
                        key,
                        isVisible,
                        isScrolling
                      }: ListRowProps) => {
                        // gets all the items in the column, so if a column has 3 items, like the screenshot, this will return an array of 3 items
                        const itemsForRow = generateIndexesForRow(
                          index,
                          rowWidth,
                          results.length
                        ).map((itemIndex) => results[itemIndex]);

                        return (
                          // element goes here
                        );
                      }}
                      noRowsRenderer={noRowsRenderer}
                    />
                  </div>
                )}
              </WindowScroller>
            )}
          </InfiniteLoader>
        );
      }}
    </AutoSizer>
  </div>
);