如何为Ag Grid可编辑列的单元格添加编辑图标？

嗨，我懂你碰到的问题了——明明写了HTML字符串想显示编辑图标，结果Ag Grid直接把代码文本打出来了，这属实有点坑。其实原因很简单：在React项目里，Ag Grid的cellRenderer如果返回字符串，会被当作纯文本处理，不会自动解析成HTML元素。给你两个靠谱的解决办法：

方法一：返回JSX元素（推荐，符合React开发习惯） #

直接在cellRenderer里返回React元素就行，Ag Grid会正确渲染成对应的DOM节点：

const [columnDefs] = useState([
  {
    field: "title",
  },
  {
    field: "result",
    editable: true,
    cellEditor: "agRichSelectCellEditor",
    cellEditorPopup: true,
    cellEditorParams: {
      values: ["Pass", "Fail", "Completed", "Not Checked"],
    },
    cellRenderer: (params) => (
      <span>
        <i className="fa fa-edit"></i>
        {params.value}
      </span>
    ),
  },
]);

注意这里要用className而不是class，毕竟是React的JSX语法~

方法二：使用dangerouslySetInnerHTML（适合必须用HTML字符串的场景） #

如果你因为某些原因一定要用HTML字符串，可以通过dangerouslySetInnerHTML让React解析它，但要注意这个方法存在XSS风险，只有当你能完全控制params.value的内容时才用：

const [columnDefs] = useState([
  {
    field: "title",
  },
  {
    field: "result",
    editable: true,
    cellEditor: "agRichSelectCellEditor",
    cellEditorPopup: true,
    cellEditorParams: {
      values: ["Pass", "Fail", "Completed", "Not Checked"],
    },
    cellRenderer: (params) => {
      const htmlContent = `<span><i class="fa fa-edit"></i>${params.value}</span>`;
      return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
    },
  },
]);

另外别忘了确认一下项目里已经正确引入了Font Awesome，不然图标还是显示不出来哦~

备注：内容来源于stack exchange，提问作者Andish