作者热门文章
- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想使用 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
在列表中作为引用。似乎当 InfiniteLoader 从服务器收到答复时,它能够强制列表重新呈现行。
forceUpdate
尝试了另一个例子在列表中,但是列表仍然没有更新。
最佳答案
根据文档,应调用 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}
.....
/>
}
关于react-virtualized - 如何通知 List 组件一项已更改大小?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41961669/
我是一名优秀的程序员,十分优秀!