反应列表项的虚拟化位置答案

【问题标题】：React Virtualized position of list item反应列表项的虚拟化位置
【发布时间】：2017-07-13 21:41:26
【问题描述】：

我在类似的设置中使用 React Virtualized，如下面的 sn-p。有几个项目使用CellMeasurer 呈现。最后一项表示将加载更多项，并且不会正常渲染。这个项目有错误的位置/样式和与之相关的错误高度。我该如何解决这个问题？

如果你想玩它，这里有一个 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>

【问题讨论】：

标签： javascript html css reactjs react-virtualized

【解决方案1】：

CellMeasurer 并非旨在以这种方式仅用于某些行。从外部 POV 来看，我理解为什么它看起来应该可以正常工作。

当Grid 呈现一个单元格时——如果它认为CellMeasurer 正在被使用——那么它positions the cell at top:0, left:0 在Grid/List 内给它空间以展开。（它的容器的大小限制了它的大小，即使它是绝对定位的。老实说，我不确定为什么会这样。）

所以在你的情况下，Grid 看到最后一行没有被测量，认为它应该是，并将其定位在 0,0。

目前最简单的解决方案是将该行也包含在 CellMeasurer 中。

【讨论】：

好的，谢谢。我正在尝试这个，因为你在 Slack 上建议它来保存一个 DOM 度量，但我当然可以忍受这个！