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

Question

我正在使用 ag-grid-react 和 ag-grid-community 版本 22.1.1。我的应用程序是使用功能组件和钩子编写的。我有一个 cellrenderer 组件，它试图使用此处找到的示例调用父组件中的处理程序。这是 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>
    </>
  );
}

单击一行上的编辑按钮时，调试器说有一个功能。

虽然收到此错误：

标签： reactjsag-gridag-grid-react

Answer 1

您正在context此代码部分中传递对象：

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

...

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

在您的单元格渲染器中，您将其称为

props.context.foo({d});

虽然应该是这样

props.context.componentParent({d});

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

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

在分配对象属性时，您还可以使用 ES6 中的这种简写语法

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

现场演示