React版AG Grid如何通过cellRenderer实现单元格条件渲染

需求说明：当行数据的athlete字段值等于'Bolt'时，对应行的age列单元格固定显示35，其余场景正常展示age字段原始值。

具体实现 #

React环境下使用AG Grid不需要像Angular版本那样配置angularCompileRows编译参数，直接通过列的cellRenderer属性就能实现条件渲染，根据场景可以选两种写法：

1. 内联函数写法（纯展示无交互场景用） #

直接在列定义里写判断逻辑，返回要渲染的React节点即可，注意渲染逻辑要配置在需要修改显示内容的age列上，比原Angular示例把逻辑写在athlete列的写法耦合度更低：

const columnDefs = [
  { headerName: "Athlete", field: "athlete", width: 150 },
  {
    headerName: "Age",
    field: "age",
    width: 90,
    cellRenderer: (params) => {
      // 从渲染参数中取当前行完整数据做判断
      if (params.data.athlete === "Bolt") {
        return <span>35</span>;
      }
      return <span>{params.data.age}</span>;
    },
  },
];

const gridOptions = {
  columnDefs: columnDefs,
  rowData: null,
};

2. 自定义组件写法（复杂交互/样式场景用） #

如果单元格需要绑定事件、嵌套复杂DOM结构，可以单独封装React组件作为渲染器传入：

// 自定义age列渲染组件
const AgeCell = (props) => {
  const { athlete, age } = props.data;
  const showValue = athlete === "Bolt" ? 35 : age;

  // 可以在这里加点击事件、自定义样式等逻辑
  return <span className="custom-age-cell">{showValue}</span>;
};

// 列定义中直接引用组件
const columnDefs = [
  { headerName: "Athlete", field: "athlete", width: 150 },
  {
    headerName: "Age",
    field: "age",
    width: 90,
    cellRenderer: AgeCell
  },
];

避坑提示：如果数据量较大，内联函数写法会在表格滚动时重复创建函数，有性能损耗，大数据量场景优先用自定义组件的写法。

内容的提问来源于stack exchange，提问作者user406480