Reactjs 反应虚拟无限滚动问题与动态高度

我试图在我的应用程序中模拟Facebook提要，就像滚动条一样。我正在跟踪来自的参考资料。我试图一次加载两个提要，然后调用

loadMoreRows

获取下两个提要。我已经硬编码我的饲料大小为10测试目的。它在第四次喂食前都能正常工作。然后我就不能顺利地移动了<代码>行渲染器一次又一次地触发数字，从而在屏幕上产生振动效果。如果我移动到第10个提要并向后滚动，

rowRenderer

再次从0开始。我想这是由于不同的高度。与参考类似，我使用了

CellMeasureCache

和

CellMeasurer

来查找动态

高度

和

宽度

，并将其传递给列表

class Scroller extends React.Component {
  _cache = new CellMeasurerCache({ defaultHeight: 100, fixedWidth: true });
  _resizeAllFlag = false; 
  _mostRecentWidth = 0;
  constructor(props) {
    super(props);
    this.state = {
      localCache: []
    }
  }
  componentDidMount(){
    this._loadData(0); 
  }
  componentDidUpdate(prevProps, prevState) {
    console.log(this._list);
    if(this._resizeAllFlag){
      this._resizeAllFlag = false;
      this._cache.clearAll();
      this._recomputeRowHeights();
    } else if(this.state.localCache !== prevState.localCache) {
      this._cache.clear(index, 0);
      this._recomputeRowHeights(index);
    }
  }
  ._loadData = (offset, callback) => {
    //Loads data from server and sets it in this.state.localCache
  }
  _recomputeRowHeights = (index) => {
    if (this._list) {
      console.log('Recomputing');
      this._list.recomputeRowHeights(index);
    }
  }
  _isRowLoaded = ({ index }) => {
    return !!this.state.localCache[index];
  }
  _loadMoreRows = ({ startIndex, stopIndex }) => {
    this._loadData(startIndex, (() => promiseResolver));
    let promiseResolver;
    return new Promise((resolve) => {
      promiseResolver = resolve;
    });
  }
  rowRenderer = ({ index, key, style, parent }) => {
    const row = this.state.localCache[index];
    let content;
    if (row) {
      content = (<Feed data={row}/>);
    } else {
      content = (<CustomLoader />);
    }
    return (
      <CellMeasurer
        cache={this._cache}
        columnIndex={0}
        key={key}
        parent={parent}
        rowIndex={index}
        width={this._mostRecentWidth}
      > 
        {content} 
      </CellMeasurer>);
  }
  _setListRef = (ref) => {
    this._list = ref;
    this._registerList(ref);
  };
  _resizeAll = () => {
    this._resizeAllFlag = false;
    this._cache.clearAll();
    if (this._list) {
      this._list.recomputeRowHeights();
    }
  };
  render() {
    const { localCache } = this.state;
    return (
      <div className="flex_grow">
        <InfiniteLoader
          isRowLoaded={this._isRowLoaded}
          loadMoreRows={this._loadMoreRows}
          rowCount={10}
        >
          {({ onRowsRendered, registerChild }) =>
            <AutoSizer disableHeight>
              {({ width, height }) => {
                if (this._mostRecentWidth && this._mostRecentWidth !== width) {
                  this._resizeAllFlag = true;
                  setTimeout(this._resizeAll, 0);
                }
                this._mostRecentWidth = width;
                this._registerList = registerChild;
                return (
                  <List
                    deferredMeasurementCache={this._cache}
                    overscanRowCount={1}
                    ref={this._setListRef}
                    height={height}
                    onRowsRendered={onRowsRendered}
                    rowCount={10}
                    rowHeight={this._cache.rowHeight}
                    rowRenderer={this.rowRenderer}
                    width={width}
                  />
                ) 
              }
              }
            </AutoSizer>}
        </InfiniteLoader>
      </div>
    );
  }
}

类滚动条扩展React.Component{
_cache=newCellMeasureCache（{defaultHeight:100，fixedWidth:true}）；
_resizealFlag=false；
_mostRecentWidth=0；
建造师（道具）{
超级（道具）；
此.state={
本地缓存：[]
}
}
componentDidMount（）{
这是.\u加载数据（0）；
}
componentDidUpdate（prevProps、prevState）{
console.log（这个列表）；
如果（此._ResizealFlag）{
这是。_resizealFlag=false；
这个；
这个。_重新计算wheeghts（）；
}else if（this.state.localCache！==prevState.localCache）{
此._cache.clear（索引，0）；
这是重新计算的重量（索引）；
}
}
.\u loadData=（偏移量、回调）=>{
//从服务器加载数据并将其设置在this.state.localCache中
}
_重新计算权重=（索引）=>{
如果（此列表）{
console.log（“重新计算”）；
此._列表.重新计算权重（索引）；
}
}
_isRowloated=（{index}）=>{
return！！this.state.localCache[index]；
}
_loadMoreRows=（{startIndex，stopIndex}）=>{
这个._loadData（startIndex，（（）=>promisersolver））；
让允诺者解决；
返回新承诺（（解决）=>{
Promisersolver=解决；
});
}
行渲染器=（{index，key，style，parent}）=>{
const row=this.state.localCache[index]；
让内容；
国际单项体育联合会（世界其他地区）{
内容=（）；
}否则{
内容=（）；
}
返回(
{content}
);
}
_setListRef=（ref）=>{
该列表=参考；
本注册列表（ref）；
};
_树脂=（）=>{
这是。_resizealFlag=false；
这个；
如果（此列表）{
此.u列表。重新计算Wheeghts（）；
}
};
render（）{
const{localCache}=this.state；
返回(
{（{onRowsRendered，registerChild}）=>
您忘记在
内容
组件中传递
行渲染器
样式。根据，此样式是定位行所必需的

修正行渲染器
rowRenderer=（{index，key，style，parent}）=>{
const row=this.state.localCache[index]；
让内容；
国际单项体育联合会（世界其他地区）{
内容=（）；//谢谢你的帮助。我最初有style。不知何故，在编辑时我可能已经删除了它。我按照你的建议再次添加了。即使添加了
style
道具，我也遇到了同样的问题。@user2193672是否在
提要
组件中的根节点上应用了
style
道具？是否可以粘贴代码？是的。我将
style
道具传递给我的
Feed
和
CustomLoader
，而不是像你建议的那样传递给
CellMeasurer
。我用它更新了问题。@user2193672我应用
style
的意思不仅仅是传递
style
道具，而是在
Feed
组件中处理它.你能粘贴你的
Feed
组件吗？（只有渲染）让我们看看。
rowRenderer = ({ index, key, style, parent }) => {
  const row = this.state.localCache[index];
  let content;
  if (row) {
    content = (<Feed style={style} data={row}/>);
  } else {
    content = (<CustomLoader style={style}/>);
  }
  return (
    <CellMeasurer
      cache={this._cache}
      columnIndex={0}
      key={key}
      parent={parent}
      rowIndex={index}
      width={this._mostRecentWidth}
    > 
      {content} 
    </CellMeasurer>);
} 

class Feed extends React.Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { style } = this.props;
    return (
      <div className="flex_grow" style={style}>
        {/* Feed related JSX */}
      </div>
    );
  }
}

rowRenderer = ({ index, key, style, parent }) => {
    const row = this.state.localCache[index];
    let content;
    if (row) {
      content = (<Feed data={row} style={style} />); // <== HERE
    } else {
      content = (<CustomLoader style={style} />); // <== AND HERE
    }
    return (
      <CellMeasurer
        cache={this._cache}
        columnIndex={0}
        key={key}
        parent={parent}
        rowIndex={index}
        width={this._mostRecentWidth}
      > 
        {content} 
      </CellMeasurer>
    );
}