Расширение React-Table с использованием композиции - проблемы с реквизитом

Question

Я пытаюсь создать компонент на основе таблицы реакций, используя композицию, чтобы мы могли использовать настроенную версию везде без повторения котельной пластины.Я использую Typescript, а React-Table не использует его.Я не вижу никаких примеров того, как это сделать, поэтому вот что я придумала до сих пор:

import * as React from 'react'
import ReactTable, {TableProps} from 'react-table'
import './../components/react-table-styling.css'
import 'react-table/react-table.css'
import Pagination from './pagination'
import { Paper } from '@material-ui/core'

export interface IReactTableProps{
    textCols:Array<string>;
}

export class ExtReactTable extends React.Component<IReactTableProps & TableProps> {

static defaultProps = {
}

constructor(props: IReactTableProps & TableProps) {
    super(props);
}

rows = (state, rowInfo) => {//set taller height and vertical centering
return {  
    style: { height:40, display:'flex', alignItems: 'center'},
}
}

headerRows = (state, rowInfo, column) => {
    return {
        style: { height: 40, display:'flex', alignItems: 'center', 
        paddingLeft: (column.Header === 'Product'||column.Header === 
'Client') ? '20px':'', 
         justifyContent: (column.Header === 'Product'||column.Header === 
'Client') ? '': 'center' }
  }
}

render() {
  return(
  <Paper>
  <ReactTable style={{cursor:'pointer', fontSize: 13, background:'#fff', borderLeft: 0, borderRight: 0}} PaginationComponent={Pagination}
      getTrProps={this.rows} getTheadThProps={this.headerRows} />
 </Paper>)
}
}

Пытаясь заставить его изначально работать, я использую его так:

import { ExtReactTable } from '../../components/ext-react-table';

 <ExtReactTable data={products} textCols={["Product"]} columns={[
          {Header: "Product", accessor: "permitProductName", minWidth: 200, style: { paddingLeft:20}},
          {Header: "Client",accessor: "clientName", minWidth: 300, style: { paddingLeft:20}},
          {Header: "Spaces", accessor: "spaces", minWidth:80, style: { textAlign: 'right', paddingRight:'4%'}},
          {Header: "Active VRMs", accessor: "activeVRMs", minWidth:80, style: { textAlign: 'right', paddingRight:'4%'}},
          {Header: "Max VRMs", accessor: "maxVRMs", minWidth:80, style: { textAlign: 'right', paddingRight:'4%'}},
          {Header: "Start Date", accessor: "startDate", style: { textAlign: 'center'}, Cell: (props) => { return <span>{dateTimeHelper.shortDate(props.original.startDate)}</span>}},
        {Header: "End Date", accessor: "endDate", style: { textAlign: 'center'}, Cell: (props) => { return <span>{(props.original.endDate !== "0001-01-01T00:00:00" && props.original.endDate !== null) ? dateTimeHelper.shortDate(props.original.endDate) : '-'}</span>}}
      ]}
      defaultSorted={[ { id: "permitProductName",  asc: true }]}
      defaultPageSize={10} className={" -highlight"}
 />

но он жалуется, что я не предоставляю опциональную опору 'loading' (а если вы поставите ее, то десятки других реквизитов таблицы реакций, для которых вы не захотите указывать значения).Какой подход к решению этой проблемы?Вы должны предоставить десятки значений в качестве defaultProps или есть какой-то другой способ?Спасибо

Answer 1

Похоже, loading и т. Д. Являются обязательными свойствами интерфейса TableProps ( здесь ), но ReactTable фактически использует Partial<TableProps> в качестве типа реквизита ( здесь *)1008 *).Если вы замените TableProps на Partial<TableProps> в своем коде для обеспечения согласованности, то ошибки должны исчезнуть.