react和vue如何将字符串形式的html结构转为真实结构

最新推荐文章于 2023-09-27 10:22:58 发布

田本初

最新推荐文章于 2023-09-27 10:22:58 发布

阅读量163

点赞数 3

分类专栏： Vue React 文章标签： vue.js react.js html

本文链接：https://blog.csdn.net/owo_ovo/article/details/133324416

版权

React 同时被 2 个专栏收录

36 篇文章 2 订阅

订阅专栏

Vue

19 篇文章 0 订阅

订阅专栏

html写法

通过innerHTML给元素添加html

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="box"></div>
  <script>
    const str = "<ul style='color:red'><li>1</li><li>2</li><li>3</li></ul>"
    const box = document.querySelector("#box")
    box.innerHTML = str
  </script>
</body>

</html>

效果如下

在这里插入图片描述

React实现

dangerouslySetInnerHTML是React中的一个属性，它可以将HTML作为字符串直接插入到组件中。使用dangerouslySetInnerHTML属性时，必须传递一个对象，该对象具有一个名为__html的属性，该属性包含要插入到组件中的HTML字符串。

实现

声明变量

const str = "<ul style='color:red'><li>1</li><li>2</li><li>3</li></ul>"

需要渲染的结构

<div dangerouslySetInnerHTML={{ __html: str }} />

也可以封装成一个可复用的方法

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

直接调用方法即可

在这里插入图片描述

Vue实现

在 Vue 中解析后端返回的字符串为 HTML，可以使用 Vue 的指令 v-html。v-html 可以将字符串解析为 HTML，并渲染到 DOM 中。

具体方法如下：

需要渲染HTML的元素
```
<div v-html="content"></div>
```
在 Vue 实例中定义 content 变量，并将后端返回的字符串赋值给 content
```
data() {
  return {
    content: '<p>Hello, World!</p>'
  }
}
```

将后端返回的字符串赋值给 content 时，可以使用 vue-html-secure 插件对字符串进行安全过滤，以避免 XSS 攻击。

import VueHtmlSecure from 'vue-html-secure'
Vue.use(VueHtmlSecure)
data() {
  return {
    content: this.$htmlSecure('<p>Hello, World!</p>')
  }
}

田本初

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
react和vue如何将字符串形式的html结构转为真实结构

react和vue如何将字符串形式的html结构转为真实结构
复制链接

扫一扫

专栏目录