首页 > web前端 > js教程 > 标题可以是: 超越危险的SetInnerHTML:是否有更安全的方法在 React 中渲染原始 HTML?

标题可以是: 超越危险的SetInnerHTML:是否有更安全的方法在 React 中渲染原始 HTML?

Linda Hamilton
发布: 2024-10-27 03:44:30
原创
1051 人浏览过

The title could be:

Beyond dangerouslySetInnerHTML: Are there Safer Ways to Render Raw HTML in React?

在 React 中以增强的安全性渲染原始 HTML

问题:

是否使用危险的SetInnerHTML在 React 中渲染原始 HTML 的唯一方法?

答案:

自从问题中描述的初始方法以来,React 中已经取得了进步,以确保更安全的 HTML 渲染。今天有四个选项可供选择:

1。 Unicode

使用 Unicode 对 HTML 字符进行编码。将文件另存为 UTF-8 并将字符集设置为 UTF-8。示例:

<div>{'\u00b7'}</div>
登录后复制

2。 Unicode 数字

将 Unicode 数字嵌入到 JavaScript 字符串中。

<div>{String.fromCharCode(183)}</div>
登录后复制

3.混合数组

将字符串和JSX元素组合成一个数组:

<div>{['First ', <span>&amp;middot;</span>, ' Second']}</div>
登录后复制

4. DangerouslySetInnerHTML(最后的手段)

使用dangerouslySetInnerHTML作为最后的选择:

<div dangerouslySetInnerHTML={{__html: 'First &amp;middot; Second'}} />
登录后复制

建议:

首选前三种方法为了安全性和可维护性。仅在绝对必要时才使用angerlySetInnerHTML。

以上是标题可以是: 超越危险的SetInnerHTML:是否有更安全的方法在 React 中渲染原始 HTML?的详细内容。更多信息请关注PHP中文网其他相关文章!

来源:php.cn
本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板