Расширение компонента React и использование одного и того же метода в базовом компоненте и новом компоненте - PullRequest
Новая
       9

Расширение компонента React и использование одного и того же метода в базовом компоненте и новом компоненте

0 голосов
/ 19 октября 2018

Когда вы расширяете компонент React с помощью композиции, я не уверен, как управлять методами на нескольких уровнях.Иметь компонент, который использует метод getTrProps, чтобы затем применить стилизацию ко всем экземплярам того компонента, который мы используем.Это применяется для расширенного компонента.Но на индивидуальном уровне также требуется getTrProps для добавления обработчиков кликов, и на данный момент ни один из них не запущен.

Это происходит из-за необходимости применять один и тот же код стиля к каждой используемой нами таблице реакций, но не нужновключить его каждый раз.Например, чтобы высота строки всегда была 40px, вам нужно использовать getTrProps, чтобы таблица расширенных реакций вызывала this.normal Rows, как показано ниже.Однако, когда вы используете эту расширенную таблицу реагирования, вам нужно установить событие щелчка строки, которое вы делаете, используя getTrProps = {this.rows}.Это то же свойство метода, которое вызывает проблему.

Сама расширенная таблица реакций (расширенная версия реактивной таблицы) имеет: 

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

, причем этот код записывается только один раз.В то время как использование расширенной-реагирующей-таблицы имеет: 

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

При этом код пишется для каждого экземпляра расширенной-реагирующей-таблицы (и всегда отличается, так как требуемые события onClick всегда разные).

Очевидно, что они мешают друг другу.Какие средства мне следует использовать, чтобы события проходили на обоих уровнях?Или мне нужно объединить реквизит, а не запускать его на обоих уровнях?Итак, this.setRowDefaultsForAllReactTables как-то объединяется с this.props.getTrProps?

Это стандартный случай, когда в коде большой части кода содержится более 200 экземпляров одного и того же компонента, и вам не нужно каждый раз писать его, поэтому вы создаете новый компонент со всем общим кодом, так чточто вы получаете все настройки по умолчанию, а затем в каждом экземпляре вы добавляете все, что является специфическим только для этого экземпляра.Таким образом, обычная стилизация строк находится в одном месте, а события щелчка строк - во многих местах.Проблема в том, что нужно запустить два набора вещей, но только один метод.Вот весь код для расширенной таблицы реакции: 

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

В настоящее время ни то, ни другое.addRowEvents или this.setDefaultSettingsForHeaderRows не запускаются.

...