react将字符串标签转换成html标签

        在react中将和标签一样的字符串转换成html标签在页面展示，如将用字符串包裹的<i class="iconfont icon-shequ1"></i>  iconfont标签转换成html标签，有三种方式：

一、使用dangerouslySetInnerHTML属性

import React from 'react';

function App() {
  const htmlString = '<i class="iconfont icon-shequ1"></i>';

  return (
    <div dangerouslySetInnerHTML={{ __html: htmlString }} />
  );
}

export default App;

        定义了一个变量htmlString，其中包含要转换为HTML标签的字符串。然后，我们使用dangerouslySetInnerHTML属性并将对象传递给它，该对象具有一个__html属性，值设置为要插入的HTML字符串

注意：

        在使用dangerouslySetInnerHTML时务必小心，确保您信任要转换的HTML字符串，以防止潜在的安全风险

二、使用第三方库react-html-parser或html-react-parser

        在使用dangerouslySetInnerHTML时，React不会自动解析并识别其中的React组件或HTML实体。它只是将提供的HTML字符串作为纯文本插入到DOM中。

        首先，通过运行以下命令安装所选库：

npm install react-html-parser

        然后，在您的组件中导入所需的库并使用它来解析HTML字符串：

import React from 'react';
import ReactHtmlParser from 'react-html-parser';

function App() {
  const htmlString = '<i class="iconfont icon-shequ1"></i>';
  const parsedHtml = ReactHtmlParser(htmlString);

  return (
    <div>{parsedHtml}</div>
  );
}

export default App;

        通过调用ReactHtmlParser()函数并将HTML字符串传递给它，我们可以获得一个被解析为React元素的结果，并将其直接渲染到组件中。

三、知道要转换的内容的结构前提下，手动创建React元素，来替代使用dangerouslySetInnerHTML

import React from 'react';

function App() {
  return (
    <div>
      <i class="iconfont icon-shequ1"></i>
    </div>
  );
}

export default App;

        在这种方法中，我们直接在JSX代码中手动创建具有所需样式和内容的React元素。这样可以确保React能够正确识别和渲染这些元素。

        若是用Unicode  <i className="iconfont">&#xe604;</i>,l里面的内容&#xe604，识别不了，会被识别为一个“”