react-html-parser

芋圆社区 > 编程 > React > react-html-parser

471

2024-02-22

2024-02-23

Hey、小怪兽

• 在React中，遇到HTML字符串代码可以用 dangerouslySetInnerHTML 来变成元素，类似于innerHTML，但是这样做很危险，不合时宜的插入HTML可能会导致网站被某些不良分子进行XSS攻击，作者取名 dangerouslySetInnerHTML 也是为了警示程序员，不要随意的使用该属性
• 这个时候就可以用到一个库了react-html-parser，这个库可以安全地转换，首先先安装：

npm install react-html-parser
# or 
yarn add react-html-parser

• 官方用法：

import React from 'react';
import ReactHtmlParser, { processNodes, convertNodeToElement, htmlparser2 } from 'react-html-parser';
 
class HtmlComponent extends React.Component {
  render() {
    const html = '<div>Example HTML string</div>';
    return <div>{ ReactHtmlParser(html) }</div>;
  }
}

• 我的用法，可以看到我写了个接口拿到这样的字符串：
• 引入头部：

import ReactHtmlParser from "react-html-parser";

• 写一个转换的方法：

// 解析html内容
const parseHtmlContent = (htmlContent) => {
  const parseContent = ReactHtmlParser(htmlContent, {
    transform: (node) => {
      if (node.type == "text") {
        const parseText = ReactHtmlParser(node.data, {
          transform: (node) => {
            return node;
          },
        });
        return parseText;
      }
    },
  });
  return parseContent;
};

• 外部用就直接调用这个方法就可以了，至于为啥要这样写方法，就是可以在 transform 里面做一些操作，比方说用 convertNodeToElement 来给这些元素增加一些属性，来给 prismjs 格式化代码块
• 先引入：

import Prism from "prismjs";
import ReactHtmlParser, { convertNodeToElement } from "react-html-parser";

• 修改方法：

// 解析html内容
const parseHtmlContent = (htmlContent) => {
  const new_anchorList = [];
  const parseContent = ReactHtmlParser(htmlContent, {
    transform: (node) => {
      if (node.type == "text") {
        const parseText = ReactHtmlParser(node.data, {
          transform: (node, index) => {
            if (node.type === "tag" && node.name === "code") {
              if ("class" in node.attribs) {
                node.attribs.class = node.attribs.class + " line-numbers";
              } else {
                node.attribs.class = "language-javascript line-numbers";
              }
              node.attribs["data-prismjs-copy"] = "复制代码";
              node.attribs["data-prismjs-copy-error"] = "复制失败";
              node.attribs["data-prismjs-copy-success"] = "复制成功(〃'▽'〃)";
              return convertNodeToElement(node, index);
            }
          },
        });
        return parseText;
      }
    },
  });
  return parseContent;
};

• prismjs格式化就不在这里介绍了：

// 如果dom元素已经渲染完成
useEffect(() => {
  if (content.length > 0) {
    try {
      Prism.highlightAll();
    } catch (error) {
      console.log(error);
    }
  }
}, [content]);

上一篇：react-device-detect

下一篇：获取用户操作系统和浏览器信息

react-html-parser

回复