如何通知 List 组件一项已更改大小？

Posted 2023-02-21

【中文标题】如何通知 List 组件一项已更改大小？

【英文标题】：How to notify List component that one item has changed the size?

【发布时间】：2017-06-17 03:08:40

【问题描述】：

我想使用 react-virtualized 渲染一个项目列表，但是有些项目可能会改变大小。

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

用例类似于facebook帖子，当有人cets时，它将扩大帖子并将其他帖子推低。

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 作为参考。而且似乎当 InfiniteLoader 从服务器接收到答案时，它能够强制列表重新渲染行。

我在列表中尝试了另一个带有forceUpdate 的示例，但是列表仍然没有更新。

https://plnkr.co/edit/RftoShEkQW5MR5Rl28Vu

【问题讨论】：

您需要使用List.recomputeRowHeights 方法。 github.com/bvaughn/react-virtualized/blob/master/docs/…

【参考方案1】：

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

【讨论】：

你能添加一个 plunker 的例子吗？ （或修改我现有的 plunker 并添加链接）。

【参考方案2】：

根据文档，应该调用 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
        .....
    />

【参考方案3】：

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

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

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

【讨论】：

谢谢一百万！我花了很多天试图解决这个问题