从功能性 React 组件传递 AgGrid 上下文

Posted 2023-03-28

【中文标题】从功能性 React 组件传递 AgGrid 上下文

【英文标题】：Passing AgGrid context from a functional React component

【发布时间】：2020-10-21 18:42:00

【问题描述】：

我有一个使用 AgGrid 显示表格的组件，显示的数据来自 Redux 选择器。

我想在表格中呈现一个带有按钮的单元格，然后该按钮将根据行数据执行操作。

我遇到的主要问题是，当我将回调函数传递给单元格渲染器中的按钮时，在父组件中调用它时不会填充行数据。我相信我需要将正确的上下文传递给单元格渲染器，以便当它从父组件调用函数时，所有数据都存在。但是，如果这是不正确的，请纠正我。但是，鉴于所有这些都发生在功能组件中，我不确定如何正确传递上下文。

示例： https://codesandbox.io/s/aggrid-redux-context-y49fd

单击“设置行数据”按钮，这将使行中的按钮出现。点击按钮后会打印出行数据，为空。

我需要一种能够从单元格渲染器访问行数据的方法。

【参考方案1】：

肮脏的解决方案

当您将this 设置为单元格渲染参数时，尝试将其绑定到 onExecute：

cellRendererParams:  onExecute: onExecute.bind(this) 

---

您需要访问当前单元格渲染正在渲染的所有行的数据，还是仅访问单行的数据？如果您只需要当前行的数据，AgGrid 已经在 props 中，您可以在单元格渲染器组件中的this.props.data 中访问它。

【讨论】：

不幸的是，bind 解决方案不起作用，因为它来自功能组件内部，并且错误提示它是全局 this 被 () => 这些组件捕获，但是我做到了只需要一行，所以我可以从道具中使用它。

是的，因此我将其标记为“肮脏的解决方案”。但它适用于您发布的沙盒。