使用 ag 网格反应功能组件无法通过上下文调用父函数

Question

我正在使用 ag-grid-react 和 ag-grid-community 版本 22.1.1。我的应用程序是使用功能组件和挂钩编写的。我有一个 cellrenderer 组件，它试图使用找到的示例 here 在父组件中调用处理程序。这是ag-grid中的错误吗？在我学习 React 的过程中，我已经在这个应用程序上工作了一年多，这是我最后一个主要障碍，所以任何帮助或获得帮助的地方都将不胜感激。

单元格渲染器组件

import React from 'react';
import Button from '../../button/button';

const RowButtonRenderer = props => {
    const editClickHandler = (props) => {
        let d = props.data;
        console.log(d);
        props.context.foo({d});
        //props.editClicked(props);
    }

    const deleteClickHandler = (props) => {
        props.deleteClicked(props);
    }

    return (<span>
        <Button classname={'rowbuttons'} onClick={() => { editClickHandler(props) }} caption={'Edit'} />&nbsp;
        <Button classname={'rowbuttons'} onClick={() => { deleteClickHandler(props) }} caption={'Delete'} />
    </span>);
};

export default RowButtonRenderer;

父组件

function Checking() {
  function foo(props) {
    let toggle = displayModal
    setNewData(props);
    setModalDisplay(!toggle);
  }

  const context = {componentParent: (props) => foo(props)};

  const gridOptions = (params) => {
    if (params.node.rowIndex % 2 === 0) {
      return { background: "#ACC0C6" };
    }
  };

  const frameworkComponents = {
    rowButtonRenderer: RowButtonRenderer,
  };

.
.
.

return (
    <>
          <AgGridReact
            getRowStyle={gridOptions}
            frameworkComponents={frameworkComponents}
            context = {context}
            columnDefs={columnDefinitions}
            rowData={rowData}
            headerHeight="50"
            rowClass="gridFont"
          ></AgGridReact>
    </>
  );
}

当点击某行的编辑按钮时，调试器说有一个函数。

虽然收到此错误：

Answer 1

您将在此代码段中传递 context 对象：

const context = {componentParent: (props) => foo(props)};

...

<AgGridReact
  context={context}
  {...}
></AgGridReact>

在你的单元格渲染器中你称之为

props.context.foo({d});

虽然应该是这样

props.context.componentParent({d});

您也可以直接分配您的回调，因为它接收相同的参数并且returns相同的结果（如果有）

function foo(props) {
  let toggle = displayModal
  setNewData(props);
  setModalDisplay(!toggle);
}
const context = {componentParent: foo};

您还可以在分配对象时使用 ES6 中的 shorthand 语法属性

function componentParent(props) {
  let toggle = displayModal
  setNewData(props);
  setModalDisplay(!toggle);
}
const context = {componentParent};

使用 ag 网格反应功能组件无法通过上下文调用父函数

react functional component with ag grid cannot call parent function via context

reactjs

ag-grid

ag-grid-react

现场演示