7

我想使用 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更新项目并重新计算位置。有一个带有InfiniteLoader（react-virtualized example）的示例，它registerChild在 List 中用作参考。似乎当 InfiniteLoader 从服务器接收到答案时，它能够强制列表重新渲染行。

我已经尝试了另一个forceUpdate关于列表的示例，但是列表仍然没有更新。

https://plnkr.co/edit/RftoShEkQW5MR5Rl28Vu

4

3 回答 3

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}
        .....
    />
}
于 2018-03-30T10:11:44.077 回答
2

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

于 2017-02-06T09:58:34.277 回答
1

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

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

注意：不推荐，这只是让 PR 被接受的一种解决方法

于 2021-01-23T19:20:19.460 回答