带有反应的意外令牌

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

你可以试试下面的代码。

基本上，我：

1. 已将 list 和 remoteRowCount 移至 MyList 的状态。

2. 将 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>
       );
     }
   
   }