React直接渲染从后台传过来的<html>标签

最新推荐文章于 2024-05-06 16:24:30 发布
最新推荐文章于 2024-05-06 16:24:30 发布
阅读量1.7w 收藏 4
点赞数 1
分类专栏： utils 文章标签： html react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/tongshuo_11/article/details/61195232
版权

在工作中使用react,遇到需要渲染从后台获取到的标签语言，发现直接放在react中是不能解析标签语言的。解决办法如下：

var content = '<strong>content</strong>';// 假设content是从接口获取到的数据

react.render(
    <div dangerouslySetInnerHTML = {{ __html:content }}></div>,
    document.body
)

这样就可以直接解析content字符串中的代码了。

Monkey_shuo
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
React学习(一) JSX及元素渲染
weixin_43616019的博客
07-16 521
react学习笔记 JSX及元素渲染
react中如何渲染html代码
weixin_30909575的博客
10-25 204
开发中遇到一个问题，就是用户输入可多个空格后，在页面上只会显示为一个空格，想到的解决办法就是利用&nbsp;去replace空格，让其可以正常渲染，如下： var result=value.replace(/\s/g,"&nbsp;"); 经过替换后发现页面上并不能直接渲染&nbsp;，经过一番搜索发现react的dangerouslySetInnerHTML...
react中两种渲染数组的方式和用函数装组件html内容
weixin_41166682的博客
09-16 796
<ul> { // this.state.contentList.map(item => ( // <li key={item.id}> // <h3>评论人：{item.name}</h3> // <p>评论内容：{item.content}</p> // </li> // )) this.state.contentList.map(
在HTML页面 学习React 基础语法
最新发布
weixin_47529732的博客
05-06 828
学习笔记，React基本语法及使用，JSX使用
react 渲染html标签
solitude1128的博客
08-01 254
<div dangerouslySetInnerHTML={{__html:item.content}}></div>
React学习之后台管理登录界面搭建（纯html引用react+antd）
qq_40589021的博客
11-17 837
纯html引用reactjs+antd,未使用全家桶，简单做了一个逻辑功能页面，还没有做注册跳转，页面也没有美化，初学者可以看看。接下来再回去把全家桶做一下，然后有时间再优化一下样式。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=
html5大气酷炫动画背景后台管理员登录
07-13
WebGL是一个基于OpenGL标准的JavaScript API，它可以在浏览器中实现硬件加速的3D图形渲染，使得网页可以展示复杂的3D场景和效果。 3. **CSS3动画**： CSS3引入了新的动画和过渡特性，可以通过改变样式属性实现平滑...
漂亮的英文后台管理系统HTML下载-后台 后台系统.rar
12-12
1. **HTML5**：HTML5的引入使得开发者可以创建更丰富的交互式用户体验，例如使用`<canvas>`标签进行动态图形绘制，`<video>`和`<audio>`标签处理多媒体内容，以及`<input>`的新类型如date、range等，增强了表单的...
html/jsp网站后台精美界面
11-12
Java代码可以被嵌入到JSP页面中，通常以脚本元素（`<% %>`）、表达式（`${ }`）和指令（`<%@ %>`）的形式出现。JSP主要用于处理服务器端逻辑，如用户登录验证、数据检索和处理。 4. JSP内置对象：JSP提供了如...
后台 html 模板
06-21
10. **SEO 优化**：考虑到搜索引擎的爬取，后台模板应包含合适的元标签，如`<title>`、`<meta>`等，以利于关键词排名和页面描述。 以上就是关于【后台HTML模板】的关键知识点，理解和掌握这些内容对于构建高效、...
绿色后台系统_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-02
1. **HTML5新元素**：HTML5引入了许多新的语义化标签，如<header>、<footer>、<nav>、<section>等，这些元素有助于提高页面结构的清晰度和可读性。 2. **媒体查询**：响应式设计的核心是媒体查询，它允许开发者根据...
使用react实现后台管理系统项目
m0_71933813的博客
12-30 8840
一.开发React必须依赖三个库 1.react：包含react所必须的核心代码 2.react-dom：react渲染在不同平台所需要的核心代码 3.babel：将jsx转换成React代码的工具 二.React的依赖引入 1.方式一：直接CDN引入 2.方式二：下载后，添加本地依赖 1).在html中引入 a.react.js b.react-dom.js c.b
React 怎样将后端给的html标签渲染到页面上
aohudai3633的博客
11-27 1843
在使用react的过程中，发现需要渲染的数据是从后端获取到的标签语言，如果直接将他放在react里面是不能够正确渲染的。 　　解决方法如下： render() { let listdata = this.state.data.entity ? this.state.data.entity.article :'' return ( &l...
React 正常渲染后端返回的HTML代码
Pioneer
11-28 5322
1、解决React项目后台接口返回HTML 文本时无法解析渲染成正常的html问题： &lt;div dangerouslySetInnerHTML = {{__html:返回的html代码}} &gt;&lt;/div&gt;  
前端如何安全的渲染HTML字符串
wsq_5211314
12-31 1950
使用js-xss，可以对用户提交的HTML内容进行净化，删除或转义所有潜在的危险代码，只保留安全的HTML标签和属性。它提供了一组方法和函数，可以净化和转义用户输入的HTML内容，以确保在浏览器环境中呈现的HTML是安全的。属性绑定时要特别小心。确保渲染的HTML字符串是可靠和安全的，避免直接从用户输入或不受信任的来源获取HTML字符串，以防止XSS攻击等安全问题。HTML Sanitizer API 的出现旨在提供一种方便且安全的方式来处理和净化 HTML，以减少潜在的安全风险，并提高用户代理的安全性。
react不解析html元素，并将html元素原样输出到页面？（已解决）
生命不息，奋斗不止
02-07 2240
前端使用react，如果是直接return html元素，react是可以正常解析的，但是如果一个变量中返回了一段html代码，此时，react并不会解析，变量中的html代码，而是将其原样输出到页面 错误代码示范 const html = "<span>111111 </span>"； return (<div>{html}</div>) //这样写页面会直接显示<span>111111 </span> 解决方法 l.
react native解析后端传过来的html
wyw223的博客
01-11 1784
可以使用 react-native-htmlview组件来解析后端返回的html https://github.com/jsdf/react-native-htmlview &lt;HTMLView value={this.state.approve_require} renderNode={this.renderNode} ...
React 如何正常渲染一段HTML字符串
weixin_30279751的博客
07-04 883
dangerouslySetInnerHTMl 属性 很多时候我们做一个项目接口会返回一段 HTML 字符串文本，然后我们把它解析渲染成正常的html，这是在项目中常见不能再常见的情况了，可是在 react 里边就有一个小小的插曲，在这里分享给同学们； 由于react 项目中是 JSX 语法，JSX 防注入攻击使得大括号里的html代码全部变成字符串进行渲染，本人就遇到了这样的问题，（还是渲染...
基于React+antd的后台管理模板（可预览）
热门推荐
张致豪
08-05 9万+
自己利用业余时间，基于React+antd写了一个后台管理模板。主要是熟悉antd组件和React，页面主要还是展示页面，不涉及后台交互。 特点： 我用
react-konva中的<Stage>标签的属性以及使用
07-08
在React Konva中，`<Stage>`是用于创建一个舞台（Stage）的组件，它是所有Konva图形的容器。下面是一些常用的`<Stage>`标签属性以及它们的使用方法： - `width`：设置舞台的宽度，可以是一个数字或字符串，例如`width={500}`或`width="50%"`。 - `height`：设置舞台的高度，可以是一个数字或字符串，例如`height={300}`或`height="30vh"`。 - `draggable`：设置舞台是否可被拖动，默认为`false`。如果设置为`true`，则可以通过鼠标拖动舞台。 - `onMouseEnter`：当鼠标进入舞台时触发的事件处理函数。 - `onMouseLeave`：当鼠标离开舞台时触发的事件处理函数。 - `onWheel`：当鼠标滚轮滚动时触发的事件处理函数。 - `onMouseDown`：当鼠标在舞台上按下时触发的事件处理函数。 - `onMouseUp`：当鼠标在舞台上松开时触发的事件处理函数。 以下是一个示例代码，展示了如何使用`<Stage>`组件： ```jsx import React from 'react'; import { Stage, Layer, Rect } from 'react-konva'; const App = () => { return ( <div> <Stage width={500} height={300}> <Layer> <Rect x={20} y={20} width={100} height={50} fill="red" draggable /> </Layer> </Stage> </div> ); }; export default App; ``` 在上面的示例中，我们创建了一个大小为500x300的舞台，并在舞台上添加了一个矩形（Rect）图形，设置其位置为(20, 20)，宽度为100，高度为50，填充颜色为红色，并启用了拖动功能。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值