React Virtualized position of list item
Question
I'm using React Virtualized in a similar setup like the snippet below. There are a couple of items that are rendered using a 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
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 answers
solution1
1 ACCPTED 2017-02-23 17:26:48
CellMeasurer wasn't intended for use with only certain rows in this way. From an external POV I understand why it looks like it should just work though.
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. (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.
The simplest solution for now would be to just wrap that row in CellMeasurer too.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.