Как передать большое количество реквизита в реактивный компонент, чтобы реагировать метод рендеринга - PullRequest
Новая
       27

Как передать большое количество реквизита в реактивный компонент, чтобы реагировать метод рендеринга

0 голосов
/ 08 июня 2019

У меня есть контейнер с избыточностью, называемый (скажем) Parent, который использует Компонент в своем методе рендеринга под названием ButtonGroup, который имеет много реквизитов. Теперь многие из этих реквизитов принимают ссылки на обратные вызовы, которые по сути являются методами класса контейнеров-редукторов, которые ссылаются на реквизиты из mapStateToProps & mapDispatchToProps и много состояния контейнера.

Моя проблема:
Я не хочу писать разметку компонента как 

onGridReady(gridModel){ // passed to the <Grid/ > props in render
  this.gridModel = gridModel;
}
callBack() { // for example
  this.gridModel.sort();
  this.props.sort();
}

callBack2() { // for example
  this.gridModel.filter();
  this.props.filter();
}

render() { 
  return (
  <>
  <ButtonGroup prop1={this.state.x} prop2={this.callBack} prop3={this.callback2}
  <Grid onGridReady={this.onGridREady}
  </>
)
}

Итак, я изменил его следующим образом: 

getProps() {}

render() {
  return <ButtonGroup {...this.getProps()} />
}

Мой вопрос:
Является ли этот способ совершенным?
Или есть более эффективный способ сделать это?

1 Ответ

1 голос
/ 08 июня 2019

Родительский (избыточный контейнер) файл: 

import { connect } from 'react-redux'
import * as actions from '../../../redux/actions'

const {callBack1, callBack2}=actions
export default connect(
   ({prop1, prop2}) => ({prop1, prop2 }), //mapStateToProps
    { callBack1, callBack2},            //mapDispatchToProps
)(ButtonGroup)

Файл группы кнопок (компонента): 

function ButtonGroup (
  { prop1, prop2, callBack1, callBack2 }
)
{
  return (<div></div>)
}
...