javascript - 如何重置 react-virtualized 包中的 Infinite Loader？

Question

重新渲染InfiniteLoader包含List和AutoSizer组件的组件的正确方法是什么。它的工作原理是在我们Child.js组件的父组件中，当用户单击父组件中的特定按钮时，我希望整个子组件重新呈现InfiniteLoader它包含的内容。例如，子组件Child.js将包含InfiniteLoader它的render()方法并清除所有行，以便可以重新填充新数据。是否与事先清除 InfiniteLoader 的缓存有关？InfiniteLoader 的示例及其设置方式如下所示。

 state = {
    listOfResults: [],
    apiPage: 1,
    nextPageLoading: false,
  };

  cache = new CellMeasurerCache({
    defaultHeight: 200,
    fixedWidth: true,
  });

  setListRef = ref => {
    this._list = ref;
    this.registerList(ref);
  };
     render() {
       return (
        <div className='infinite-loader-container'>
          <InfiniteLoader
            isRowLoaded={this.isRowLoaded}
            loadMoreRows={loadMoreRows}
            rowCount={this.state.listOfResults.length}
            ref={ref => (this.infiniteLoaderRef = ref)}
            >
            {({onRowsRendered, registerChild}) => {
  
              this.registerList = registerChild;
  
              return (
                <div className='full-text-search-list-container'>
                  <AutoSizer>
                    {({height, width}) => {
                      return(
                        <List
                          rowHeight={this.cache.rowHeight}
                          rowCount={this.state.listOfResults.length}
                          overscanRowCount={5}
                          ref={this.setListRef}
                          deferredMeasurementCache={this.cache}
                          onRowsRendered={onRowsRendered}
                          height={height}
                          width={width}
                          rowRenderer={this.rowRenderer}
                        />
                      );
                    }}
                  </AutoSizer>
                </div>
              );
            }}
          </InfiniteLoader>
        </div>
       )
      }

标签： javascriptreactjsreact-reduxinfinite-scrollreact-virtualized