react如何渲染包含html标签元素的字符串

如何渲染包含html标签元素的字符串

最近有个搜索替换的需求，用户可以输入关键字信息来匹配出对应的数据，然后对其关键字进行标记显示，如下图所示：
react如何渲染包含html标签元素的字符串-LMLPHP

实现上面的需求的思路就是前端去判断检索内容，将内容中对应的关键字设置一个背景颜色的样式,代码如下：

    if (content?.includes(serachV)) {
      content = content.replaceAll(serachV, `<span style="background-color: gold;">${serachV}</span>`);
      return content
    }

但这样设置后并未达到我想要的效果，前端展示上并没有变黄，没有生效。

后面查阅资料发现，在react中，出于安全考虑的原因（XSS 攻击），在 React.js 当中所有的表达式插入的内容都会被自动转义，就相当于 jQuery 里面的 text(…) 函数一样，任何的 HTML 格式都会被转义掉。

所以通过富文本编辑器进行操作后的内容，会保留原有的标签样式，并不能正确展示，如下图红框所示：

react如何渲染包含html标签元素的字符串-LMLPHP

因此我们可以使用dangerouslySetInnerHTML这个api将其设置为内部的HTML，以此达到上述的效果，代码如下：

    if (content?.includes(serachV)) {
      content = content.replaceAll(serachV, `<span style="background-color: gold;">${serachV}</span>`);
      return <span dangerouslySetInnerHTML={{ __html: content }} />;
    }

完整代码如下：

export const quickReplaceColumns = (serachV: string) => {
  const renderNode = (content: string) => {
    if (content?.includes(serachV)) {
      content = content.replaceAll(serachV, `<span style="background-color: gold;">${serachV}</span>`);
      return <span dangerouslySetInnerHTML={{ __html: content }} />;
    }
    return content || '--';
  };
  return [
    {
      title: '用例名称',
      dataIndex: 'name',
      width: '30%',
      render: (name: string) => renderNode(name),
    },
    {
      title: '用例内容',
      dataIndex: 'content',
      width: '50%',
      render: (content: string) => renderNode(content),
    },
    {
      title: '所属模块',
      dataIndex: 'module_name',
      width: '10%',
    },
  ];
};

实现效果如下：

react如何渲染包含html标签元素的字符串-LMLPHP

dangerouslySetInnerHTML是什么

dangerouslySetInnerHTMl 是React标签的一个属性，dangerouslySetInnerHTML翻译过来就是：危险的设置内部HTML。

为什么说是危险的呢？因为用户的输入是不可控的，如果是这样的操作是开发给用户输入可能会导致 cross-site scripting (XSS) 攻击或者其他网页攻击，还有一些意向不到的错误出现。

但我们这里的使用情况是控制了输入的，并没有开放给用户输入，所以不会出现上面的情况，可以放心使用。

使用注意事项

dangerouslySetInnerHTML的语法：第一层{ }代表JSX语法，第二层{ }是一个__html:string的键值对。
最初未用反引号包裹<img className="detail_img" src=${v[0]} />结果渲染的全是[object Object]，想了半天才反应过来__html:string
用反引号包裹的html代码不再是JSX语法，所以clasName要改为class；

曲鸟