React AgGrid - 基于道具条件的行样式答案

【问题标题】：React AgGrid - Row Style based on conditions from the propsReact AgGrid - 基于道具条件的行样式
【发布时间】：2021-12-04 13:03:20
【问题描述】：

我将 AgGrid 用于 React，并且我正在使用类风格的反应组件 - 不是功能组件。

我的目标是根据道具条件渲染cellStyle。

但是，当我想渲染它时，它甚至没有加载道具。

我该如何解决这个问题？

【问题讨论】：

你能把你的代码放在这里吗？

标签： javascript reactjs ag-grid

【解决方案1】：

您可能希望在更新列的cellStyle 后调用GridApi.refreshCells() 以应用更改：

const columnDefs = React.useMemo(
  () => [
    {...}
    {
      headerName: "Age",
      field: "age",
      cellStyle: props.styles
        ? { backgroundColor: "pink" }
        : { backgroundColor: "white" }
    }
  ],
  [props.styles]
);

React.useEffect(() => {
  gridApi?.refreshCells({ force: true });
}, [props.styles]);

现场演示

类组件

功能组件

【讨论】：

对于一个类组件，这会是什么样子？不确定。
@employee 您可以使用componentDidUpdate 检查您的道具是否更改，如果新旧道具不同，请致电GridApi.refreshCells()。你需要一个例子吗？
让我们假设我将一个列表作为道具传递给一个类组件。我想检查某个行的值（例如“accountId”）是否在此列表中。如果是，则将其着色为“绿色”，否则为“蓝色”。这将如何与 refreshcells'refreshCells' 一起使用？
@employee 你想只根据里面的数据给单元格上色吗？还是取决于外部道具？
@employee 不确定这是否是您想要的，但我已更新到类组件