反应出乎意料的令牌

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 的状态。

将isRowLoadedloadMoreRowsrowRenderer改成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>
    );
  }

}

反应出乎意料的令牌

Unexpected token with react

reactjs

react-virtualized