时间戳

首页 > 解决方案 > 在 react redux 中调用嵌套组件上的函数

reactjs - 在 react redux 中调用嵌套组件上的函数

问题描述

抱歉，如果这个问题显示出对我怀疑的反应范式缺乏理解，但我对这项技术非常陌生。

我想从我的“动作”代码中分派一个动作，该动作最终应该调用嵌套组件上的函数。到目前为止，我一直只是通过调度动作并将它们捕获在工作正常的减速器中来简单地修改状态。

我正在开发一个作为更广泛框架的一部分的 portlet，我可以在操作中捕获 onExport() 消息。从这里我不知道调用嵌套组件的最佳方法（我需要访问嵌套组件中的内部 ag-grid 才能导出它）。

我考虑过引入一些新的“exportRequested”状态标志并将其设置在减速器中，然后在嵌套组件中使用 componentDidReceiveProps。我也一直在研究“连接”的想法，这似乎是正确的，因为它可以让我公开该功能并将其连接到商店，但我似乎无法加入这些点并弄清楚如何从中调用它减速机。有没有办法分派一个动作并直接在嵌套组件中捕获它？

一些代码：

容器：

import {initData} from '/actions';

export class MainComponent extends PureComponent {
  static propTypes = {
    initData: func.isRequired,
    data: array.isRequired,
  };

  static defaultProps = {
    data: [],
  };

  componentDidMount() {
    this.props.initData();
  }

  render() {
    const { data } = this.props;
    return (
      <div>
        <ChildGrid data={data} />
      </div>
    );
  }
}

export default connect(
  state => ({
    data: getData(state),
  }),
  { initData }
)(MainComponent);

嵌套网格：

export class ChildGrid extends PureComponent {

  static propTypes = {
    data: array.isRequired,
  };

  static defaultProps = {
    data: [],
  };

  exportData() {
    // HOW TO MESSAGE THIS FROM ACTIONS. I want to call DataGrid.gridApi.exportAsCsv()
  }

  render() {
    const { data } = this.props;
    return (
      <div>
        <DataGrid
          rowData={data}
        />
      </div>
    );
  }
}

标签： reactjsreduxnestedconnect

解决方案

您想到了解决问题的正确方法，方法是在您的 redux 存储中创建一个状态标志，然后在您的嵌套组件中监听该属性的更改。不幸的是，在 Redux 中，我们无法监听 Redux 存储的特定事件或特定状态属性更改。

这样的解决方案的实现如下：

ChildGrid.jsx

class ChildGrid extends PureComponent {

  static propTypes = {
    data: array.isRequired,
  };

  static defaultProps = {
    data: [],
  };

  componentWillReceiveProps(newProps) {
      if (newProps.exportRequested) {
          this.exportData();
      }
  }

  exportData() {
    DataGrid.gridApi.exportAsCsv();
  }

  render() {
    const { data } = this.props;
    return (
      <div>
        <DataGrid
          rowData={data}
        />
      </div>
    );
  }
}

const mapStateToProps = (state) => {
    return {
        reduxExportRequested: state.exportRequested
    };
};

export default connect(mapStateToProps)(ChildGrid);

推荐阅读