Проблемы перекрытия клеток в реакции виртуализированы с помощью измерителя клеток - PullRequest
Новая
       17

Проблемы перекрытия клеток в реакции виртуализированы с помощью измерителя клеток

0 голосов
/ 17 марта 2020

Я использую React Virtualized для отображения списка своих элементов, который имеет следующие функции: 1) Нажав на любой элемент, пользователю будет предложено создать панель сведений, где он сможет обновить сведения об элементе. И когда он вернется к списку, он сможет увидеть детали в ячейке элемента в списке. Он может добавить много деталей, чтобы увеличить или уменьшить размер, удалив детали

2) Он может удалить элемент или добавить другой элемент в список с определенными деталями или без подробностей.

CellMeasurer удовлетворяет моим требованиям, поскольку поддерживается высота c. Но у меня возникают следующие проблемы с ним

1) изначально, когда мой список монтируется впервые, первые несколько элементов измеряются и отображаются правильно, но как только я прокручиваю до конца, элементы перекрываются друг с другом (Положение не правильно, я предполагаю, что defaultHeight применяется к неизмеренным ячейкам). Это прекрасно работает, как только список снова перерисовывается. 2) Кроме того, когда я обновляю детали элемента, список не обновляется новыми настройками высоты

Я уверен, что где-то моя реализация неверна, но потратил много времени на то, чтобы в этом разобраться. Пожалуйста, дайте мне знать, что можно сделать здесь, чтобы исправить это 

ItemView = props => {
        const {index, isScrolling, key, style} = props,
            items = this.getFormattedItems()[index]
        return (
            <CellMeasurer
                cache={this._cache}
                columnIndex={0}
                isScrolling={isScrolling}
                key={key}
                rowIndex={index}
                parent={parent}>
                {({measure, registerChild}) => (
                    <div key={key}  style={style} onLoad={measure}>
                        <div
                            onLoad={measure}
                            ref={registerChild}
                            {...parentProps}>
                            <Item
                                onLoad={measure}
                                key={annotation.getId()}
                                {...childProps}
                            />
                        </div>
                    </div>
                )}
            </CellMeasurer>
        )
    }

renderDynamicListOfItems(){
   return (<div>
                <List
                    height={500}
                    ref={listComponent => (_this.listComponent = listComponent)}
                    style={{
                        width: '100%'

                    }}
                    onRowsRendered={()=>{}}
                    width={1000}
                    rowCount={props.items.length}
                    rowHeight={this._cache.rowHeight}
                    rowRenderer={memoize(this.ItemView)}
                    // onScroll={onChildScroll}
                    className={listClassName}
                    overscanRowCount={0}
                />
            </div>
     )
}

Кроме того, я вручную запускаю повторное измерение моего элемента в его componentDidUpdate, как следует () 

    Component Item 
    ...
    componentDidUpdate() {
        console.log('loading called for ', this.props.annotation.getId())
        this.props.onLoad()
    }
    ...

В main parent Я пересчитываю высоты списка каждый раз, когда список обновляется, и запускаю принудительное обновление следующим образом 

Component ParentList
...
    componentDidUpdate() {
        console.log("calling this parent recomputing")
        this.listComponent.recomputeRowHeights()
        this.listComponent.forceUpdateGrid()
    }
...
...