使用组合扩展 React-Table - 道具问题

Question

我正在尝试使用组合创建基于 react-table 的组件，这样我们就可以在任何地方使用自定义版本而无需重复样板。我正在使用 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' （如果你提供了那个，那么你不想提供价值的其他几十个 react-table 道具).解决这个问题的方法是什么？你必须提供几十个值作为 defaultProps 还是有其他方法？谢谢

Answer 1

看起来 loading 等等是 TableProps 接口 (here), but ReactTable actually uses Partial<TableProps> as its props type (here) 的必需属性。如果您在代码中将 TableProps 替换为 Partial<TableProps> 以保持一致，那么错误应该会消失。

使用组合扩展 React-Table - 道具问题

Extending React-Table using composition - issues with props

composition

typescript

reactjs

react-props

react-table