Неожиданный токен с реакцией

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>
       );
     }
   
   }