时间戳

首页 > 解决方案 > 使用组合扩展 React-Table - 道具问题

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

问题描述

我正在尝试使用组合创建基于 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"}
 />

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

标签： reactjstypescriptcompositionreact-propsreact-table

解决方案

看起来loading等等是TableProps接口的必需属性（此处），但ReactTable实际上Partial<TableProps>用作其道具类型（此处）。如果您在代码中替换TableProps为Partial<TableProps>一致，那么错误应该会消失。

推荐阅读