Open G3z opened 7 years ago
Looks like your toggling the product.open but you're not telling React to re-render anything. You might want to try something like this to get the list to re-render and re-run the itemSizeGetter function.
class CP extends React.Component {
renderItem(index, key) {
let product = this.state.products[index];
return <ProductItem
order={this.state.order}
key={key}
onOpen={()=>{
product.open = !product.open;
this.list.forceUpdate();
}}
item={product} />;
}
itemSizeGetter(index){
let product = this.state.products[index];
return product.open ? 723 : 273;
}
render(){
<div className='products_list'>
<ReactList
ref={c => this.list = c}
itemRenderer={this.renderItem.bind(this)}
itemSizeGetter={this.itemSizeGetter.bind(this)}
length={this.state.products.length}
type='variable'
threshold={200}
useTranslate3d
/>
</div>
}
}
I have a list of rows and they are uniform in size (233px) but based on user intervention a row can grow (to 723px) I thought this was the right way to do it but it seems I was wrong (I think the row size is not re-calculated if the item is in view) so how do I handle dynamic height ?