在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"></i>,l里面的内容,识别不了,会被识别为一个“”