如何通知List组件一个项目已更改大小?

时间:2017-01-31 15:47:52

标签: react-virtualized

我想使用react-virtualized呈现项目列表,但有些项目可能会改变大小。

我添加了一个演示,其中每个项目都有一个按钮,当有人点击按钮时,该项目需要展开并将下面的项目推低: https://plnkr.co/edit/GG2bSIC5M1Gj7BR1pOii

用例类似于facebook帖子,当有人评论它会扩展帖子并将其他帖子推低。

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')

有没有办法实现这个目标?

更新

我意识到必须有办法强制List更新项目并重新计算职位。有一个InfiniteLoaderreact-virtualized example)的例子,它在列表中使用registerChild作为参考。似乎当InfiniteLoader从服务器收到答案时,它能够强制列表重新渲染行。

我在列表中尝试了forceUpdate的另一个示例,但列表仍未更新。

https://plnkr.co/edit/RftoShEkQW5MR5Rl28Vu

3 个答案:

答案 0 :(得分:4)

根据文档,应调用forceUpdateGrid()而不是forceUpdate()。

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

我遇到了类似的问题,并通过在componentWillReceiveProps方法中调用forceUpdateGrid()来解决它。

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

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

答案 1 :(得分:2)

尝试使用来自react-virtualized而不是List的Collection。它应该有帮助:)

答案 2 :(得分:1)

添加 key={Math.random()} 列表项的父项解决了我的问题。

<ListWidget key={Math.random()}>
  <Autosizer>{
     .....
     <List
      .....
      />
    .....
   }</Autosizer>
</ListWidget>