AgGridReact单元格无法渲染服务端JSON返回的HTML内容

AgGrid默认将单元格内容视为纯文本，不会解析HTML标签，所以你看到的是<strong>、<br />这类源码而非渲染后的格式。以下是几种可行的解决方案：

方案1：使用AgGrid内置富文本渲染器 #

在columnDefs中为目标列配置内置的富文本渲染器，它支持解析常见HTML标签：

// 初始化state时配置列定义
this.state = {
  gridStyle: { /* 你的样式 */ },
  gridRef: React.createRef(),
  rowData: [],
  columnDefs: [
    // 其他列配置...
    {
      headerName: '请求详情',
      field: 'htmlContent', // 替换为你存储HTML数据的实际字段名
      cellRenderer: 'agRichCellRenderer',
      cellRendererParams: {
        allowRichText: true
      }
    }
  ]
};

方案2：自定义单元格渲染函数 #

如果内置渲染器不够灵活，可以直接写渲染函数插入HTML：

columnDefs: [
  {
    headerName: '请求详情',
    field: 'htmlContent',
    cellRenderer: (params) => {
      const container = document.createElement('div');
      container.innerHTML = params.value;
      return container;
    }
  }
]

方案3：React组件渲染器（推荐） #

用React组件配合dangerouslySetInnerHTML处理，更符合React开发模式：

// 定义自定义渲染组件
const HtmlRenderer = (props) => {
  return <div dangerouslySetInnerHTML={{ __html: props.value }} />;
};

// 在列定义中使用
columnDefs: [
  {
    headerName: '请求详情',
    field: 'htmlContent',
    cellRendererFramework: HtmlRenderer
  }
]

额外注意：HTML转义问题 #

如果后端返回的是转义后的字符串（比如<strong>而非<strong>），需要先在数据处理阶段解码：

xhr.onload = function () {
  let data = JSON.parse(xhr.responseText);
  // 遍历数据，解码目标字段的HTML转义字符
  data = data.map(item => ({
    ...item,
    htmlContent: item.htmlContent
      .replace(/&lt;/g, '<')
      .replace(/&gt;/g, '>')
      .replace(/&amp;/g, '&')
  }));
  this.setState({ rowData: data });
}.bind(this);

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