gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-03 17:10:32 24 4
gpt4 key购买 nike

我正在使用 ag-grid-react 和 ag-grid-community 版本 22.1.1。我的应用程序是使用功能组件和钩子(Hook)编写的。我有一个 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>
</>
);
}
单击一行上的编辑按钮时,调试器说有一个功能。
enter image description here
虽然收到此错误:
enter image description here

最佳答案

您正在通过 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};
现场演示
Edit 64110983/react-functional-component-with-ag-grid-cannot-call-parent-function-via-context/64113150#64113150

关于reactjs - 使用 ag 网格 react 功能组件无法通过上下文调用父函数,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/64110983/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com