Reactjs 使用合成扩展反应表-道具问题

我正在尝试使用合成创建一个基于反应表的组件，这样我们就可以在任何地方使用自定义版本，而无需重复锅炉板。我使用的是Typescript，而react表不使用它。我看不到任何这样做的例子，因此，到目前为止，我提出了以下建议：

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*作为来自“React”的React
从“react table”导入ReactTable，{TableProps}
导入“./components/react table styleing.css”
导入“react table/react table.css”
从“./Pagination”导入分页
从“@material ui/core”导入{Paper}
导出接口iActTableProps{
textCols：数组；
}
导出类ExtReactTable扩展React.Component{
静态defaultProps={
}
构造器（道具：IReactTableProps和TableProps）{
超级（道具）；
}
行=（状态，行信息）=>{//设置更高的高度和垂直居中
返回{
样式：{height:40，display:'flex'，alignItems:'center'}，
}
}
headerRows=（状态、行信息、列）=>{
返回{
样式：{高度：40，显示：'flex'，对齐项目：'center'，
paddingLeft：（column.Header=='Product'| | column.Header===
“客户”）？“20px”：“，
justifyContent:（column.Header=='Product'| | column.Header===
'客户端'？'''center'}
}
}
render（）{
返回(
)
}
}

为了让它一开始工作，我这样使用它：

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

从“../../components/ext-react-table”导入{ExtReactTable}；
{return{dateTimeHelper.shortDate（props.original.startDate）}}，
{Header:“End Date”，accessor:“endDate”，style:{textAlign:'center'}，Cell:（props）=>{return{（props.original.endDate！==“0001-01-01T00:00:00”&&props.original.endDate！==null）？dateTimeHelper.shortDate（props.original.endDate）：'-}
]}
defaultSorted={[{id:“permitProductName”，asc:true}]}
defaultPageSize={10}className={“-高亮显示”}
/>

---

但它抱怨说我没有提供可选的道具“加载”（如果你提供了这个道具，那么react table的其他几十个道具你就不想提供值）。解决这个问题的方法是什么？您必须提供几十个值作为defaultProps还是有其他方法？感谢

看起来

加载

等都是

TableProps

接口（）的必需属性，但是

ReactTable

实际上使用

部分

作为其道具类型（）。如果在代码中将

TableProps

替换为

Partial

以保持一致，那么错误应该会消失。

看起来

加载

等是

TableProps

接口（）的必需属性，但是

ReactTable

实际上使用

Partial

作为其道具类型（）。如果您将代码中的

TableProps

替换为

Partial

，以保持一致，则错误应消失。

自2019年5月29日发布的typescript 3.5需要额外的TableProps属性。自2019年5月29日发布的typescript 3.5需要额外的TableProps属性。