Question

使用合成扩展React组件时，我不确定如何在多个级别上管理方法。有一个使用getTrProps方法的组件，然后将样式应用于我们使用的该组件的所有实例。这适用于扩展组件。但是在个人级别上，还需要getTrProps来添加点击处理程序，目前它们都没有运行。

这是因为需要对我们使用的每个反应表应用相同的样式代码，但又不想每次都包含它。例如，要将行高设置为始终为40px，则需要使用getTrProps，以便Extended-react-table调用this.normal行，如下所示。但是，当您使用此扩展反应表时，您需要设置一个行单击事件，可以通过使用getTrProps = {this.rows}来进行。这是导致问题的相同方法属性。

扩展反应表（react-table的扩展版本）本身具有：

getTrProps={this.setRowDefaultsForAllReactTables} and then:
setRowDefaultsForAllReactTables= (state, rowInfo, column) => {
return { style: { height:40, display:'flex', alignItems: 'center'} }
}

，此代码仅编写一次。虽然extended-react-table的用法有：

getTrProps={this.addRowEvents}  and then:
addRowEvents= (state, rowInfo) => {
    return {   onClick: e => { this.props.openProduct(rowInfo.original); }  
}

为扩展反应表的每个实例编写此代码（并且总是不同，因为所需的onClick事件总是不同的）。

显然，它们彼此干扰。我应该使用什么手段来确保事件在两个级别上都运行？还是我需要组合道具而不是同时在两个级别上运行？因此，this.setRowDefaultsForAllReactTables与this.props.getTrProps组合在一起吗？

这是一个标准情况，在同一组件的大约200个实例上具有大量样板代码，并且不想每次都编写它，因此您将在其中创建所有通用代码的新组件，从而获得所有默认设置，然后在每个实例中添加特定于该实例的任何内容。因此，常见的行样式放在一个地方，而行单击事件在很多地方。问题是有两套东西要运行，但只有一种方法。这是Extended-react-table的完整代码：

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

export interface IExtendedReactTableProps{
}

export interface IExtendedReactTableState {
}

export class ExtendedReactTable extends React.Component<IExtendedReactTableProps & 
Partial<TableProps>, IExtendedReactTableState> {
    constructor(props: IExtendedReactTableProps & Partial<TableProps>) {
        super(props);
    }

setDefaultSettingsForRows = (state, rowInfo, column) => {
    return {  
        style: { height:40, display:'flex', alignItems: 'center'},
    }
}

setDefaultSettingsForHeaderRows = (state, rowInfo, column) => {
    return {
        style: { height: 40, display:'flex', alignItems: 'center', 
outline:'none'
    }
}

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

及其用法的示例实例：

 <ExtendedReactTable data={products} columns={[ {Header: "Product", accessor: "ProductName"}]}
      defaultSorted={[ { id: "ProductName",  asc: true }]}
      defaultPageSize={10} className={" -highlight"} 
      getTrProps={this.addRowEvents}  />

当前或this.addRowEvents或this.setDefaultSettingsForHeaderRows均未运行。

扩展React组件，并在基本组件和新组件中使用相同的方法

0 个答案: