React 列表项的虚拟化位置
React Virtualized position of list item
我在与下面的代码片段类似的设置中使用 React Virtualized。有几个项目使用 CellMeasurer
呈现。最后一个项目表示将加载更多项目并且未正常呈现。此项目有错误的 position/style 和与之相关的错误高度。我该如何解决这个问题?
如果你想玩它,这里有一个 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>
CellMeasurer
并非旨在以这种方式仅用于某些行。从外部 POV 我理解为什么它看起来应该可以正常工作。
当 Grid
渲染一个单元格时 - 如果它认为 CellMeasurer
正在被使用 - 然后它 positions the cell at top:0, left:0 在 Grid
/ 中给它 space List
展开。 (它的容器的大小限制了它的大小,即使它是绝对定位的。老实说,我不确定这是为什么。)
所以在你的例子中,Grid
看到最后一行没有被测量,认为它应该是,并将它定位在 0,0。
目前最简单的解决方案是将该行也包装在 CellMeasurer
中。
我在与下面的代码片段类似的设置中使用 React Virtualized。有几个项目使用 CellMeasurer
呈现。最后一个项目表示将加载更多项目并且未正常呈现。此项目有错误的 position/style 和与之相关的错误高度。我该如何解决这个问题?
如果你想玩它,这里有一个 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>
CellMeasurer
并非旨在以这种方式仅用于某些行。从外部 POV 我理解为什么它看起来应该可以正常工作。
当 Grid
渲染一个单元格时 - 如果它认为 CellMeasurer
正在被使用 - 然后它 positions the cell at top:0, left:0 在 Grid
/ 中给它 space List
展开。 (它的容器的大小限制了它的大小,即使它是绝对定位的。老实说,我不确定这是为什么。)
所以在你的例子中,Grid
看到最后一行没有被测量,认为它应该是,并将它定位在 0,0。
目前最简单的解决方案是将该行也包装在 CellMeasurer
中。