react-virtualized – 如何通知List组件一个项目已更改大小?
发布时间:2020-12-15 20:11:16 所属栏目:百科 来源:网络整理
导读:我想使用react-virtualized呈现项目列表,但是有些项目可能会改变大小. 我添加了一个演示,其中每个项目都有一个按钮,当有人点击按钮时,项目需要展开并将下面的项目推低: https://plnkr.co/edit/GG2bSIC5M1Gj7BR1pOii 用例类似于facebook帖子,当有人评论它会
我想使用react-virtualized呈现项目列表,但是有些项目可能会改变大小.
我添加了一个演示,其中每个项目都有一个按钮,当有人点击按钮时,项目需要展开并将下面的项目推低: 用例类似于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.应该有帮助:)
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |