Вот функциии render для моего компонента реакции. Моя настройка экрана не изменяется при изменении размера экрана, но я могу подтвердить через консоль, что width и state.columnCount (используется cellSizeAndPositionGetter) меняются.Как получить зависящую от виртуализации коллекцию для обновления при повторной визуализации с новой шириной и columnCount?
Возможно ли инициировать обновление после изменения параметра (а именно, width)? Или я здесь что-то не так?
Sidenote: react-virtualizedListделает обновление при ширине изменения параметра.
cellSizeAndPositionGetter({index}) {
const list = this.state.cardsList;
const columnCount = this.state.columnCount;
const columnPosition = index % (columnCount || 1);
const datum = list[index];
const height = datum.height;
const width = CELL_WIDTH;
const x = columnPosition * (GUTTER_SIZE + width);
const y = this._columnYMap[columnPosition] || 0;
this._columnYMap[columnPosition] = y + height + GUTTER_SIZE;
return ({
height,
width,
x,
y
});
}
...
render() {
return (
<div style={styles.subMain}>
<AutoSizer >
{({height, width}) => {
console.log(`width: ${width}`);
console.log(`col count: ${this.state.columnCount}`);
return (
<Collection
cellCount={this.state.cardsList.length}
cellRenderer={this.cellRenderer}
cellSizeAndPositionGetter={this.cellSizeAndPositionGetter}
height={height}
width={width}
overscanRowCount={1}
/>
);
}}
</AutoSizer>
</div>
);
}
UPDATE: (через несколько часов)
я обнаружил очень запутано обходные, чтобы получить react-virtualizeCollection обновить следующие изменение параметра ширины.
При изменении размера экрана я удаляю последний элемент списка из Collection элементов отображения (изображений). Сначала я попробовал очистить список, но это вызывает очевидные визуальные побочные эффекты. Теперь при изменении размера экрана только конечное изображение на моем дисплее странно мерцает.
Но было бы неплохо получить Collection для обновления после width изменить. :)
0 Коментарий Код: Collection Введите код, который может быть изменен. Ключевой частью является третья строка setState, где я удаляю последний элемент.
updateDimensions() {
this.setState({
screenWidth: window.innerWidth,
columnCount: Math.floor(window.innerWidth/(CELL_WIDTH + GUTTER_SIZE)),
cardsList: [...this.state.cardsList.slice(0, this.state.cardsList.length - 1)]
});
}
componentDidMount() {
...
window.addEventListener("resize", this.updateDimensions);
}