How to notify a list component that one item has resized?

Question

I would like to display a list of elements using virtual-virtualized, however some elements may resize.

I added a demo where each element has a button, and when someone clicks the button, then the element needs to be expanded and click the lower positions below: https://plnkr.co/edit/GG2bSIC5M1Gj7BR1pOii

The use case is similar to the posts in facebook, when someone notices that he will expand the message, and other messages will be lower.

ReactDOM.render(
<List
className='List'
autoHeight
width={300}
height={400}
rowCount={list.length}
rowHeight={30}
rowRenderer={
  ({ index, isScrolling, key, style }) => (
    <div
      className='Row'
      key={key}
      style={style}
    >
      {list[index]}
      <Expander />  /* contains the button, which when click it will expand more text*/
    </div>
  )
}
/>,
document.getElementById('example')

Is there any way to achieve this?

UPDATE

, List . InfiniteLoader (- ), registerChild . , InfiniteLoader , .

forceUpdate , List - .

https://plnkr.co/edit/RftoShEkQW5MR5Rl28Vu

Answer 1

Collection from active-virtualized List. :)

Answer 2

DocumentUpdateGrid() forceUpdate().

https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#public-methods

, forceUpdateGrid() componentWillReceiveProps.

componentWillReceiveProps(){
    this.refs.forceUpdateGrid();
}

render(){
    <List
        ref={ref => this.refs = ref}
        .....
    />
}