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

Question

我正在为 React 使用 AgGrid，并且我正在使用 class 风格的 React 组件——而不是功能组件。

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

然而，当我想渲染它时，它甚至没有加载道具就渲染了。

我该如何解决这个问题？

Answer 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]);

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

React AgGrid - Row Style based on conditions from the props

javascript

reactjs

ag-grid

现场演示

Class分量

功能组件