Question

很抱歉，如果这个问题显示出对反应范式缺乏理解，我怀疑确实如此，但是我对这项技术还很陌生。

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

我正在将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>
    );
  }
}

Answer 1

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

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

ChildGrid.jsx

DisplayName     : 7-Zip 18.05 (x64)
Publisher       : Igor Pavlov
InstallDate     : 
DisplayVersion  : 18.05
UninstallString : C:\Program Files\7-Zip\Uninstall.exe

DisplayName     : Adobe Flash Player 31 NPAPI
Publisher       : Adobe Systems Incorporated
InstallDate     : 
DisplayVersion  : 31.0.0.122
UninstallString : 
C:\WINDOWS\SysWOW64\Macromed\Flash\FlashUtil32_31_0_0_122_Plugin.exe - 
maintain plugin

DisplayName     : Adobe Flash Player 31 PPAPI
Publisher       : Adobe Systems Incorporated
InstallDate     : 
DisplayVersion  : 31.0.0.122
UninstallString : 
C:\WINDOWS\SysWOW64\Macromed\Flash\FlashUtil32_31_0_0_122_pepper.exe - 
maintain pepperplugin

DisplayName     : Cisco AnyConnect Secure Mobility Client
Publisher       : Cisco Systems, Inc.
InstallDate     : 20180906
DisplayVersion  : 4.6.01103
UninstallString : MsiExec.exe /X{58524593-122C-43F0-96E2-A6BCC42E3412}

在React Redux中调用嵌套组件上的函数

1 个答案: