Question

跑步时意外。我正在尝试加载虚拟化反应的InfiniteLoader。想了解如何通过此组件调用API如果有任何示例可用。我从https://github.com/bvaughn/react-virtualized/blob/master/docs/InfiniteLoader.md获取了该组件我正在使用https://bvaughn.github.io/react-virtualized/#/components/InfiniteLoader

中的示例

import React from 'react';
import ReactDOM from 'react-dom';
import { InfiniteLoader, List } from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once

export default class MyList extends React.PureComponent {

  const remoteRowCount

  const list = [];

  function isRowLoaded ({ index }) {
    return !!list[index];
  }

  function loadMoreRows ({ startIndex, stopIndex }) {
  }

  function rowRenderer ({ key, index, style}) {
    return (
      <div
        key={key}
        style={style}
      >
        {list[index]}
      </div>
    )
  }

  //Render the list from this function
  render() {
    return(
      <InfiniteLoader
    isRowLoaded={isRowLoaded}
    loadMoreRows={loadMoreRows}
    rowCount={remoteRowCount}
  >
    {({ onRowsRendered, registerChild }) => (
      <List
        height={200}
        onRowsRendered={onRowsRendered}
        ref={registerChild}
        rowCount={remoteRowCount}
        rowHeight={20}
        rowRenderer={rowRenderer}
        width={300}
      />
    )}
  </InfiniteLoader>
    );
  }

}

获得以下给定的异常

Module build failed: SyntaxError: D:/code/react-starter/src/Components/MyList/MyList.js: Unexpected token (8:8)

   6 | export default class MyList extends React.PureComponent {
   7 |
>  8 |   const remoteRowCount
     |         ^
   9 |
  10 |   const list = [];
  11 |

Answer 1

您可以尝试以下代码。

基本上，我：

将list和remoteRowCount移至MyList的状态。

将isRowLoaded loadMoreRows rowRenderer更改为MyList的实例方法。您可能还想对onRowsRendered等做同样的事情。

import React from 'react';
import ReactDOM from 'react-dom';
import { InfiniteLoader, List } from 'react-virtualized';
import 'react-virtualized/styles.css'; // only needs to be imported once

export default class MyList extends React.PureComponent {
  constructor() {
    super();

    this.state = {
      remoteRowCount: 0,
      list: [],
    };

    this.isRowLoaded = this.isRowLoaded.bind(this);
    this.loadMoreRows = this.loadMoreRows.bind(this);
    this.rowRenderer = this.rowRenderer.bind(this);
  }

  isRowLoaded ({ index }) {
    return !!this.state.list[index];
  }

  loadMoreRows ({ startIndex, stopIndex }) {
  }

  rowRenderer ({ key, index, style}) {
    return (
      <div
        key={key}
        style={style}
      >
        {this.state.list[index]}
      </div>
    )
  }

  //Render the list from this function
  render() {
    return(
      <InfiniteLoader
    isRowLoaded={this.isRowLoaded}
    loadMoreRows={this.loadMoreRows}
    rowCount={this.state.remoteRowCount}
  >
    {({ onRowsRendered, registerChild }) => (
      <List
        height={200}
        onRowsRendered={onRowsRendered}
        ref={registerChild}
        rowCount={remoteRowCount}
        rowHeight={20}
        rowRenderer={this.rowRenderer}
        width={300}
      />
    )}
  </InfiniteLoader>
    );
  }

}

反应意外的令牌

1 个答案: