React-Table: исключение, вызванное вызовом getResolvedState () для компонента ref

Question

Я пытаюсь реализовать функцию загрузки с использованием React Table, пакета react-csv и TypeScript.

Я пытаюсь создать и использовать ссылку для компонента таблицы, используя createRef(), однако выдает следующее исключение

«Свойство getResolvedState» не существует для типа «RefObject» ».

Мой код выглядит следующим образом:

import {CSVLink} from "react-csv";
import * as React from 'react';
import ReactTable from 'react-table';

export default class Download extends React.Component<{},{}> {

  private reactTable: React.RefObject<HTMLInputElement>;
  constructor(props:any){
    super(props);
    this.state={} // some state object with data for table
    this.download = this.download.bind(this);
    this.reactTable = React.createRef();
  }

   download(event: any)
   {
    const records =this.reactTable.getResolvedState().sortedData; //ERROR saying getResolved state does not exist
     //Download logic
   }

    render()
    {
       return(
       <React.Fragment>
       <button onClick={this.download}>Download</button>
       <ReactTable 
           data={data} //data object
           columns={columns}  //column config object
           ref={this.reactTable}
       />
     </React.Fragment>
    }
}

Any help would be appreciated

Answer 1

Вы должны обнаружить, что проблема решена следующим образом:

1. , пересмотрев способ ссылки reactTable на ваш <ReactTable /> компонент , как описано здесь , и
2. доступ к getResolvedState() из поля current вашей реагирующей таблицы ref

Кроме того, рассмотрите возможность обертывания обоих визуализированных элементов с фрагментом , чтобы обеспечить правильную визуализациюПоведение:

/* Note that the reference type should not be HTMLInputElement */
private reactTable: React.RefObject<any>;

constructor(props:any){
  super(props);
  this.state={};
  this.download = this.download.bind(this);
  this.reactTable = React.createRef();
}

download(event: any)
{
   /* Access the current field of your reactTable ref */
   const reactTable = this.reactTable.current;

   /* Access sortedData from getResolvedState() */
   const records = reactTable.getResolvedState().sortedData;

   // shortedData should be in records
}

render()
{
   /* Ensure these are correctly defined */
   const columns = ...;
   const data = ...;

   /* Enclose both elements in fragment, and pass reactTable ref directly */
   return <React.Fragment>
   <button onClick={this.download}>Download</button>
   <ReactTable 
       data={data}
       columns={columns}
       ref={ this.reactTable } />
   </React.Fragment>
}

Надеюсь, что поможет!