我想使用react-virtualized呈现项目列表,但是有些项目可能会改变大小. 我添加了一个演示,其中每个项目都有一个按钮,当有人点击按钮时,项目需要展开并将下面的项目推低: https://plnkr.c
我添加了一个演示,其中每个项目都有一个按钮,当有人点击按钮时,项目需要展开并将下面的项目推低:
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')
有没有办法实现这个目标?
UPDATE
我意识到必须有一种方法来强制List更新项目并重新计算位置. InfiniteLoader(react-virtualized example)有一个例子,它使用List中的registerChild作为ref.似乎当InfiniteLoader从服务器收到答案时,它能够强制列表重新呈现行.
我已尝试使用forceUpdate列表中的另一个示例,但List仍未更新.
https://plnkr.co/edit/RftoShEkQW5MR5Rl28Vu
尝试使用来自react-virtualized而不是List的Collection.应该有帮助:)