反应列表项的虚拟位置
[英]React Virtualized position of list item
问题描述
I'm using React Virtualized in a similar setup like the snippet below. 
我在类似以下代码段的设置中使用React Virtualized。 There are a couple of items that are rendered using a CellMeasurer . 有一些使用CellMeasurer渲染的CellMeasurer 。 The last item indicates that more items will be loaded and is not rendered normally. 最后一项表示将加载更多项目，并且无法正常渲染。 This item has the wrong position/style and the wrong height associated with it. 该商品的位置/样式错误，并且高度不正确。 How can I fix this? 我怎样才能解决这个问题？
If you want to play with it, here is a Plunkr: https://plnkr.co/edit/TrKdNu4FfNsXqERPVnYo?p=preview 如果您想玩它，这里有一个Plunkr： https ://plnkr.co/edit/TrKdNu4FfNsXqERPVnYo ? p = preview
var List = ReactVirtualized.List; var CellMeasurer = ReactVirtualized.CellMeasurer; var CellMeasurerCache = ReactVirtualized.CellMeasurerCache; var cache = new CellMeasurerCache({ fixedWidth: true, minHeight: 50 }); // List data as an array of strings var namesList = [ 'Brian Vaughn', 'Bob Smith', 'Someone Else', 'I hate making up names for the sake of names.' // And so on... ]; var App = React.createClass({ getInitialState: function() { return { list: namesList }; }, render: function() { return <List className='List' width={300} height={300} rowCount={this.state.list.length + 1} rowHeight={cache.rowHeight} deferredMeasurementCache={cache} list={this.state.list} rowRenderer={ ({ index, isScrolling, key, parent, style }) => { var item = this.state.list[index]; let result; if (!item) { console.log(index); result = <div className='Row' style={style} key={key} >Loading!!! </div>; } else result = <CellMeasurer cache={cache} columnIndex={0} key={key} style={style} rowIndex={index} parent={parent}> { <div className='Row' key={key} style={style} > {this.state.list[index]} </div> } </CellMeasurer>; return result; }}/>; } }); // Render your list ReactDOM.render( <App/>, document.getElementById('example') );
.List { border: 1px solid black; box-sizing: border-box; } .Row { width: 100%; height: 100%; border-bottom: 1px solid black; display: flex; align-items: center; padding: 0 0.5rem; box-sizing: border-box; }
<!DOCTYPE html> <html> <head> <script src="https://unpkg.com/react/dist/react-with-addons.min.js"></script> <script src="https://unpkg.com/react-dom/dist/react-dom.min.js"></script> <script src="https://unpkg.com/react-virtualized/dist/umd/react-virtualized.js"></script> <link rel="stylesheet" href="https://unpkg.com/react-virtualized/styles.css"> <link rel="stylesheet" href="styles.css"> </head> <body> <div id="example"> <!-- This element's contents will be replaced with your code... --> </div> <script src="script.js"></script> </body> </html>
1 个解决方案
解决方案1
1 已采纳 2017-02-23 17:26:48
CellMeasurer wasn't intended for use with only certain rows in this way. CellMeasurer并非旨在以这种方式仅用于某些行。 From an external POV I understand why it looks like it should just work though. 从外部POV可以理解为什么它看起来应该可以工作。
When Grid renders a cell- if it thinks CellMeasurer is being used- then it positions the cell at top:0, left:0 to give it space within the Grid / List to expand. 当Grid渲染一个单元Grid -如果它认为正在使用CellMeasurer则它将该单元格放置在top：0，left：0处，以在Grid / List为其扩展空间。 (The size of its container constrains its size, even though it's absolutely positioned. I'm not sure why this is to be honest.) （即使容器处于绝对位置，它的容器大小也会限制其大小。我不确定为什么会这样。）
So in your case, Grid sees the last row hasn't been measured, think it's supposed to be, and positions it at 0,0. 因此，在您的情况下， Grid看到未测量最后一行，认为应该进行测量，并将其定位为0,0。
The simplest solution for now would be to just wrap that row in CellMeasurer too. 现在，最简单的解决方案就是将行也包装在CellMeasurer 。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.