Question

我有一个包含许多组件的项目，如：

 @connect((store) => {
  return {
    metrics: store.billing_reports_metrics.billing_reports_metrics,
    startDateOnLoad: store.billing_reports_metrics.startDateAutohealing,
    endDateOnLoad: store.billing_reports_metrics.endDateAutohealing,
    metricsFetched: store.billing_reports_metrics.fetched,
    errorMsg: store.billing_reports_metrics.error,
    fetching: store.billing_reports_metrics.fetching
  };
})
class BillingReportsController extends MyComponent {
  constructor(props){
      let custom_methods = ['refreshTableOnDateChange', 'renderAllTables'];
      super(props, custom_methods);
      this.props.dispatch({type: "SET_BILLING_REPORTS_START_DATE", payload: moment().tz('US/Eastern').subtract(1, 'hours')})
      this.props.dispatch({type: "SET_BILLING_REPORTS_END_DATE", payload: moment().tz('US/Eastern')})
  }

  componentWillMount() {
    this.props.dispatch(fetchBillingReportsMetrics(this.props.startDateOnLoad,this.props.endDateOnLoad))
  }

我想让这种类型的控制器变得通用，如果它是一个可以传递道具的常规组件，这将很容易。问题是道具通过装饰器传递，每个组件都在单独的文件中

如何在我的应用中为billing_reports以外的报告类型制作此通用内容并执行相同的操作？

Answer 1

您可以尝试使用自定义Higher-order Component

这样，您应该能够将您喜欢的州属性的名称传递给装饰者（示例中为“billing_reports”）或其他道具。

如何使用Redux连接装饰器制作通用反应组件？

1 个答案: