react过滤后台富文本传来带标签的内容 react中像vue中v-html的方法

最新推荐文章于 2024-07-29 19:26:43 发布
最新推荐文章于 2024-07-29 19:26:43 发布
阅读量6.1k 收藏 5
点赞数 8
分类专栏： react react中v-html Vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33323469/article/details/88871355
版权
Vue 同时被 3 个专栏收录
22 篇文章 0 订阅
订阅专栏
react
14 篇文章 2 订阅
订阅专栏
react中v-html
1 篇文章 0 订阅
订阅专栏
  • 做个没有思想的咸鱼，只写最易懂的文章

相信以前会vue的同学都知道vue中的v-html是一个很牛逼的指令，
在react中当然也有这样的方法
比如我们在后台返回一个数据 这个可不是普通的文本哦

是带标签 ，带排版样式的
如图
在这里插入图片描述

this.state={
			titles:'',
			content:'',
		}

我们需要在页面上显示
在vue中是不是直接{content}完事

而在react中就不一样需要这样写

  <span dangerouslySetInnerHTML={{__html: this.state.content}}></span>

显示出来一定是你想要的

在这里插入图片描述

顺变补充一点
一般后台返回的数据都是加密过的

content: "%3Cp%3E%3Cbr%2F%3E%3C%2Fp%3E%3Cp%20style%3D%22line"

此时在前端你需要解码
直接用函数

decodeURIComponent();

                                                   **看完了 是不是顺手点个赞**
1登峰造极
关注
专栏目录
react 替换标签内容_如何去除富文本中的html标签及vue、react、微信小程序中的过滤器...
weixin_39622710的博客
12-19 922
在获取富文本后，又只要显示部分内容，需要去除富文本标签，然后再截取其中一部分内容；然后就是过滤器，在微信小程序中使用还是挺多次的，在vue及react中也遇到过1.富文本去除html标签去除html标签及 空格let richText = ' sdaflsjf的丰富及饿哦塞尔dsfjlie';/* 去除富文本中的html标签 *//* *、+限定符都是贪婪的，因为它们会尽可能多的匹配...
react字符串转为dom标签，类似于Vue中的v-html
见贤思齐焉，见不贤内自省
04-12 1808
react字符串转为dom标签，类似于Vue中的v-html
在react中使用wangeditor富文本
最新发布
outstanding木槿
07-29 600
在react中使用wangeditor富文本
react中实现v-html功能
qq_45560350的博客
02-10 2312
使用dangerouslySetInnerHTML export default class NovelItem extends Component { render() { const novelMsg = this.props.novelMsg; return ( <div className="novelItem"> <div>{novelMsg.title}</div> // 注意:__html有两个
当后台接口返回存在html标签的字符串，react如何处理
程序员雪儿的博客
10-15 4957
例如： render{ return( &lt;div&gt; &lt;div&gt;接下来是例子&lt;/div&gt; &lt;div dangerouslySetInnerHTML={{__html:"&lt;span&gt;这是一个带有html标签的字符串 &lt;/span&gt;"}..
React V6实现v-if、v-show、v-html
_小郑有点困了的博客
06-29 1470
在vue中使用v-if、v-show、v-html这些命令得心应手，那么react是否也存在这样的命令呢？似乎是没有的，需要自己实现，也就是用原生的写法直接控制dom。
如何去除富文本中的html标签及vue、react、微信小程序中的过滤器
10-17
在处理富文本内容时，常常需要去除其中的HTML标签，这在Web前端开发中是一个常见的需求，特别是在Vue、React以及微信小程序等前端框架中。本文将详细介绍如何去除富文本中的HTML标签，并在Vue、React及微信小程序中...
vue-reactflow:在 Vue.js 应用程序中渲染 React 组件的实验
08-04
vue-reactflow 这是一个演示项目，用于展示在 Vue.js 应用程序中使用的 React 组件 。 在 Vue 中使用 React 绝对是一种反模式，但有时可能需要使用它。 在这种情况下，我尝试在 Vue 应用程序中组合一个子 React 类...
vue 怎么处理html标签_如何去除富文本中的html标签及vue、react、微信小程序中的过滤器...
weixin_33780516的博客
01-30 2976
在获取富文本后，又只要显示部分内容，需要去除富文本标签，然后再截取其中一部分内容；然后就是过滤器，在微信小程序中使用还是挺多次的，在vue及react中也遇到过1.富文本去除html标签去除html标签及 空格let richText = ' sdaflsjf的丰富及饿哦塞尔dsfjlie';/* 去除富文本中的html标签 *//* *、+限定符都是贪婪的，因为它们会尽可能多的匹配...
kettle 去除 html 标签,【React】富文本编辑器 清空文本内容 获取HTML
weixin_39786850的博客
06-26 313
富文本编辑器 React 传入import React,{Component } from 'react';import { Card, Button, Table, Form, Select,Modal, message } from 'antd';import { Wrap} from './style';// 富文本的 内容数据值import { EditorState } from ...
在React中实现Vue中的v-html效果
weixin_53452096的博客
07-23 5128
在React中实现Vue中的v-html效果使用原生操作使用dangerouslySetInnerHTML 使用原生操作 //在函数组件之中 let [str,setStr]=useState("<h1>hello world</h1>") let toJsx=()=>{ document.getElementById("box").innerHTML(str) //获取dom元素，使用innerHTML插入内容 } <div id="box"> {toJs
vue 和react中的v-html，以及双向绑定，和点击事件的区别
xiaokangna的博客
09-05 695
在react中的dangerouslySetInnerHTML export default class App extends Component { state = { msg : <p> 这里是一些html标签的内容，需要使用模板字符串 } render () { return ( < div> {/* 使用规则，以对象的形式，key值 __html (俩个下划线) */} <div dangerouslySetInnerHTML = {{ __html : this.s
react总结之插入获取到的HTML元素
my_love_download的博客
06-22 1123
在vue中我们可以使用指令v-html来将获取到的HTML元素在页面上展示,在react中,同样可以将获取到的HTML元素在页面上展示.在react中,可以使用dangerouslySetInnerHTML将HTML在页面上显示,如一下代码: import React, { Component } from 'react' import ReactDom from 'react-dom' class TestHtml extends Component { constructor(props) {
如何在React项目中动态插入HTML内容
TianXuab的博客
08-17 3661
通过上述步骤，我们就可以在React中使用类似于v-html的功能了。总结起来，React中没有内置的v-html指令，但我们可以通过使用dangerouslySetInnerHTML属性来实现类似的功能。在上面的代码中，我们创建了一个名为App的React组件，并在render方法中使用了我们的自定义组件MyComponent。在上面的代码中，我们创建了一个名为MyComponent的React组件，并在render方法中使用了dangerouslySetInnerHTML属性。
React中将字符串类型的标签渲染在页面上-dangerouslySetInnerHTML
qq_60292609的博客
12-09 1928
在vue中提供了v-html可以直接将内容标签解析渲染在页面上 虽然react中没有提供像什么v-html,但是提供了一个方法dangerouslySetInnerHTML,效果和v-html一样 缺点 — XSS攻击 人们经常将跨站脚本攻击（Cross Site Scripting）缩写为CSS，但这会与层叠样式表（Cascading Style Sheets，CSS）的缩写混淆。因此，有人将跨站脚本攻击缩写为XSS。 XSS攻击通常指的是通过利用网页开发时留下的漏洞，通过巧妙的方法注入恶意指令.
Vue和React 如何正常渲染一段HTML字符串
qq_36434345的博客
07-10 1378
解析data对象中带有标签的des字段 1.react的方法：dangerouslySetInnerHTMl 属性 <div dangerouslySetInnerHTML = {{__html:返回的html代码片段}} ></div> <div dangerouslySetInnerHTML = {{__html:data.des}} ></div&...
react将html代码字符串转化为html_Taro 发布 3.0 RC ：支持 React / Vue / Nerv
weixin_39643244的博客
11-26 386
作者：余澈在 Taro Next 预览版（Alpha）版本之后，我们没有停下迭代的步伐，经过两个月的开发和数百次提交之后，我们谨慎但坚定地发布 Taro Next 测试（Beta） 版，Beta 版发布后，社区很多开发者使用上了 Taro Next，他们的帮助和赞誉加上我们内部项目使用的良好反馈，Beta 发布一个月之后，我们非常自信地发布了候选版（RC）版本。在稳定的 Beta 版本里，Taro...
解析后端返回的带有标签的数据内容
qq_47249564的博客
10-29 2681
解析后端返回的带有标签的数据内容 使用 dangerouslySetInnerHTML 方法（react） const html = {__html:record.content}; console.log(html); // {__html: "<p>这里是返回的带标签的内容</p>"} return <span dangerouslySetInnerHTML={html}></span> 这个方.
React与Vue中监听变量变化技术解析
"React和Vue框架提供了不同的方法来监听组件内部或外部变量的变化，以便在变量更新时自动更新组件的状态。本文将详细讨论在React 16版本之前和之后监听变量变化的策略，以及Vue中如何实现类似的功能。" React中监听...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

1登峰造极

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值