Question

我正在尝试使用React Table，createRef()包和TypeScript来实现下载功能。

我正在尝试使用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为表组件创建和使用引用，但是它引发了以下异常

“类型为'RefObject'的属性'getResolvedState'不存在”。

我的代码如下：

  <meta property="og:locale" content="en_US"/>
  <meta property="og:site_name" content="Sleepyhead"/>
  <meta property="og:title" content="Sleepyhead the most luxurious mattress! Starting at just Rs 8,999/- Sleepyhead"/>
  <meta property="og:url" content="https://mysleepyhead.com/blog/sleepyhead-the-most-luxurious-mattress-starting-at-just-rs-8999/"/>
  <meta property="og:type" content="article"/>
  <meta property="og:description" content="People on an average spend 33% of their lifetime in bed! Your bed is a place where you relax, recover, and recharge your batteries. Considering the impact sleep has on our overall health, you may already be thinking about investing in a top of the line mattress. While what defines “luxury” is obviou"/>
  <meta property="og:image" content="https://mysleepyhead.com/blog/wp-content/uploads/2019/04/Cover.jpg"/>
  <meta property="og:image:url" content="https://mysleepyhead.com/blog/wp-content/uploads/2019/04/Cover.jpg"/>
  <meta property="og:image:secure_url" content="https://mysleepyhead.com/blog/wp-content/uploads/2019/04/Cover.jpg"/>
  <meta property="og:image:width" content="930"/>
  <meta property="og:image:height" content="675"/>

Answer 1

您应该找到解决问题的方法：

修改将reactTable引用与<ReactTable />组件as documented here关联的方式，并且
从reactTable引用的getResolvedState()字段访问current

另外，请考虑包装两个渲染元素with a fragment以确保正确的渲染行为：

/* 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>
}

希望有帮助！

React-Table：在组件ref上调用'getResolvedState（）'引发异常

1 个答案: