在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 (
<i class="iconfont icon-shequ1"></i>
export default App;
在这种方法中,我们直接在JSX代码中手动创建具有所需样式和内容的React元素。这样可以确保React能够正确识别和渲染这些元素。
若是用Unicode <i className="iconfont"></i>,l里面的内容,识别不了,会被识别为一个“”
传入
js
x页面的数据已在公共方法中拼好,需要加等
标签
做着重处理
// 消息内容:把
字符串
转换成
html
标签
msg = this.trans
Html
(notice_content)
notice_content为传过来的数据
trans
Html
(notice_content){
let content_prefix =_.split(notice_content, '...
React
是目前最流行的前端框架,很多读者用
React
很溜,但想要深入学习
React
的原理就会被官方源码仓库的代码绕的晕头
转
向。今天我们通过不依赖任何第三方库的方式,抛弃边界处理、性能优化、安全性等弱相关代码手写一个基础版的
React
,供大家学习和理解
React
的核心原理。知乎不支持代码片段高亮和内嵌 CodeSandbox,建议收藏后阅读博客原文。本文实现的是包含现代
React
...
function show
html
(
html
String){
var
html
= {__
html
:
html
String};
return <div dangerouslySetInner
HTML
={
html
}></div>...
在写项目的过程中,经常遇到渲染的数据是数组内嵌套数组的,之前都是用父子组件传值的方式来解决,今天发现项目中特别多这样的需求,如果都用子组件的话,就需要创建很多子组件,工作量也增加了很多。所以就想到了将
html
字符串
转换成
html
;
该方法只适合纯静态展示,如果需要逻辑操作,建议还是使用父子组件传值的方式
方法如下:
import
React
, { Component } from '
react
'...
"<p><img src=\"https://cbu01.alicdn.com/img/ibank/2019/837/044/12219440738_1848546139.400x400.jpg\" alt=\"0\" width=\"750\" /><img src=\"https://cbu01.alicdn.com/img/ibank/...
dangerouslySetInner
HTML
={{ __
html
:
html
String}}return ( <div>{props.record.contents.map(value => ( <div className={styles.expendBlock}> <p da...
说到
React
Element,不得不提到的就是在
React
中,用来替代
JavaScript
(
JS
)的语言,
JS
X。
JS
X作为
React
的官方指定语法,
JS
X允许用户在
JS
代码中插入
HTML
代码。但是,这种写法浏览器是无法解析的。他们需要一个
转
换器,Babel就充当了这样一个角色,他在
JS
X代码编译时候将其
转换成
JS
文件,这样浏览器就能解析了。 怎么
转
换呢,我们知道,
JS
X有
JS
和
HTMl
两种写...
将string 的
字符串
转
换为
HTML
的两种方法采用jquery对象
转
换采用原生
javascript
中DOMParser的parseFromString方法实现1.采用jquery实现var str=""+""+"div1-1"+"div1-2"+""+""+"div2-1"+"div2-2"+"";+"/div>";var div
Html
=$(str).find('#div1').
html
...