Question

我有一个名为（{说}）Parent的redux容器，该容器在其渲染方法中使用了一个名为ButtonGroup的组件，该组件有很多道具。现在，许多道具都使用回调引用，这些回调本质上是redux容器类方法，它们引用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()} />
}

我的问题是：
这样可以表演吗？
还是有更好的表现方法呢？

Answer 1

父（redux容器）文件：

function validate_mobile($mobile)
{
    return preg_match('/^\+[0-9]{12}$/m', $mobile);
}

ButtonGroup（组件）文件：

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)

如何将大量道具传递给React组件以进行渲染方法

1 个答案: