aggrid识别cell中url并实现跳转

comlum配置

    {
      headerName: I18N.value('pages_comment'),
      field: 'comments',
      sortable: true,
      cellRenderer: 'UrlDirectCellRender',
      cellRendererParams: {
        highlightText: searchText,
      },
    },

自定义cell

import React, { Component } from 'react';
import './urlDirectCellRender.scss';
import { replaceKeywords } from '../../common/utils';

export default class UrlDirectCellRender extends Component {
  getCellContent() {
    const {
      agGridReact, highlightText, value,
    } = this.props;
    let displayValue = value;
    const reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
    if (displayValue !== null && displayValue !== undefined) {
      displayValue = displayValue.replace(reg, "<a href=$1$2 target='_blank' style='text-decoration:underline;'>$1$2</a >");
    }
    const cellHeight = agGridReact.gridOptions.rowHeight;
    const contentStyle = this.getCellStyle();
    return (
      <div className="urlCellRender-container" style={{ height: `${cellHeight}px`, lineHeight: `${cellHeight}px` }}>
        <div
          style={contentStyle}
          title={value}
          className="commentUrl"
          // dangerouslySetInnerHTML={{ __html: displayValue.replace(reg, "<a href='$1$2' target='_blank' style='text-decoration:underline;'>$1$2</a >").replace(/\n/g, '<br />') }}
          dangerouslySetInnerHTML={{ __html: displayValue }}
        />
      </div>
    );
  }

  getCellStyle = () => {
    const contentStyle = { display: 'inine-block', fontSize: '16px', color: '#333' };
    contentStyle.userSelect = 'text';
    return contentStyle;
  }

  render() {
    const cellContent = this.getCellContent();
    return cellContent;
  }
}

核心代码

   
  // 获取url方法
   let testString = value;
    const reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;
    if (testString !== null && testString !== undefined) {
      testString = displayValue.replace(reg, "<a href=$1$2 target='_blank' style='text-decoration:underline;'>$1$2</a >");
    }

  // cellcontent使用url
        <div
          style={contentStyle}
          title={value}
          className="commentUrl"
          dangerouslySetInnerHTML={{ __html: testString }}
        />

效果如图