ReactJS dangerouslySetInnerHTML删除数据属性
ReactJS是一个用于构建用户界面的JavaScript库。它使用组件化的方式来构建用户界面，可以快速构建可交互的单页应用程序。
dangerouslySetInnerHTML是ReactJS中的一个属性，用于在组件中直接设置HTML内容。它通常用于将从后端获取的富文本内容插入到组件中，但需要注意潜在的安全风险。
在React中，为了避免XSS（跨站脚本攻击）的风险，React默认会对通过props传递的HTML内容进行转义，以防止恶意脚本注入。然而，在某些特殊情况下，我们可能确实需要将原始的HTML字符串直接插入到组件中，这时就可以使用dangerouslySetInnerHTML属性。
使用dangerouslySetInnerHTML时，我们需要传递一个包含__html属性的对象作为值，该属性的值是需要插入到组件中的原始HTML字符串。这样，React将会直接将该HTML内容渲染到组件中，而不会进行转义。
但需要注意的是，由于直接插入原始HTML内容可能存在安全风险，使用dangerouslySetInnerHTML需要确保插入的内容是可信的，并且避免插入恶意代码。
dangerouslySetInnerHTML的使用示例：
function MyComponent() {
const htmlContent = "<p>This is some <strong>HTML</strong> content.</p>";
return <div dangerouslySetInnerHTML={{ __html: htmlContent }} />;
}在腾讯云的云计算服务中，如果需要构建基于ReactJS的应用程序，可以使用腾讯云的云服务器（CVM）来部署和运行React应用程序。另外，腾讯云还提供了对象存储（COS）来存储和管理静态资源文件，以及内容分发网络（CDN）来加速静态文件的传输。
腾讯云云服务器（CVM）产品介绍：https://cloud.tencent.com/product/cvm
腾讯云对象存储（COS）产品介绍：https://cloud.tencent.com/product/cos
腾讯云内容分发网络（CDN）产品介绍：https://cloud.tencent.com/product/cdn
相关·内容
我正在构建一个简单的幻灯片版web应用程序，它使用JSON对象作为模拟数据库，并通过ReactJS组件呈现UI。
有没有一种方法可以将HTML +标记作为字符串存储在JSON对象中，将字符串传递给ReactJS，然后让ReactJS在ReactJS组件中呈现HTML元素/标记？
下面是JSON对象的一个示例：
{
"slides": {
"1":{
"title":"Introductory Finance",
"content":"<p>By Raymo
浏览 2提问于2021-07-03得票数 0
回答已采纳
我使用的是ReactJS，也知道dangerouslySetInnerHTML，但我希望能够将元素的style属性设置为原始字符串。我已经搜索并查看了React源代码，但我什么也找不到。
有没有办法做到这一点？
浏览 3提问于2015-01-30得票数 6
1回答
ReactJS和XML
、、、
我试着用React制作RSS阅读器。我遇到了一些RSS ()，它的元素包含在CDATA部分中，包括HTML。处理这件事的“反应”方法是什么？
我的理解是，通常情况下，如果您使用常规的javascript/jquery来解析XML文档，您只需获取数据并将其直接写入HTML文档，如下所示
document.getElementById('target').innerHTML
=xmlDoc.getElementsByTagName('description')[0].childNodes[0].data
但是，由于React使用虚拟DOM，所以不能这样做。如果你想做
浏览 2提问于2017-03-23得票数 1
我正在学习ReactJS，在我在网络上看到的所有示例中，HTML代码总是内联呈现的，这意味着你必须将所有的HTML标记直接添加到JS文件中，这非常丑陋并且很难处理(如果你有很多标记)。难道没有一种方法可以将所有HTML放在一个单独的文件中，只在渲染时引用该文件吗？就像我们在Rails或Angular 2中所做的那样。
这是我的代码：
var Main = React.createClass({
render() {
return (
<div> <h1>Hello, World!</h1> </di
浏览 1提问于2017-03-20得票数 0
2回答
我试图使用reactjs从数据库中显示内容，但是代码一直在显示加载.也不打印任何结果。但是我警告结果，例如警报(Res)；它打印数据。我认为问题在于代码<MainBox data={this.state.data} />行。
下面是代码
var MainBox = React.createClass({
getInitialState: function() {
return { data: null };
},
componentDidMount: function() {
$.get('jeck2.php').done(functi
浏览 7提问于2017-10-03得票数 0
回答已采纳
我有一个函数，它返回几行html，如下所示：
render: function() {
var badges = user.get('achievements').badges.map(function(badge) {
var str = '<h3><span className="fa fa-fw '
switch(badge.id) {
case '0':
str += ('fa-briefcase"></span><small>
浏览 3提问于2014-05-12得票数 5
回答已采纳
1回答
怎么样？
我正在尝试在React程序中使用unicode字符。我正在从一个JSON文件读入JS程序。
FontAwesome角色显然属于私人使用区域，在我的网站上，它呈现为一个正方形。
如何才能真正显示unicode字符？有问题的字符是\uf0e1
下面是函数的一部分：
render (){
return <button
className ="button write"
onClick={this.workingLink} >
浏览 0提问于2020-06-12得票数 0
我试图通过Reactjs将数据库中的数据显示为搜索框中的用户类型。如果实现下面的代码行
this.state = { data: [], value: '', email: ''};
它不会将任何内容显示为用户类型，也不会出现错误消息。
但是我实现了下面的两行代码
this.state = {value: ''};
this.state = {email: ''};
它将在下面显示错误。
at 1886:98 Uncaught :无法读取未定义at App.render的属性“map”(browser.min.js:4，98:2
浏览 0提问于2018-12-05得票数 0
回答已采纳
1回答
我对反应很陌生，现在还在学习。
我试图返回文件树视图，但它显示了页面上的所有元素，如下所示。
<ul className='folder-container'>
<li className='folder-item'> app </li>
<li className='folder-wrapper'><ul className='folder-container'><ul className='folder-container'>
浏览 0提问于2018-07-11得票数 0
回答已采纳
即时通信工具使用数据网格组件
我想在其中一个字段中使用html并显示链接或图片等。我尝试使用如下所示的列呈现函数
var columns = [
{ name = 'field' },
{ name = 'link',render : function(uri) { return '<a href="'+uri+'">link</a>'} },
];
但是，它会将html打印为文本。
浏览 0提问于2015-06-08得票数 1
我是Reactjs的新手，我尝试获取一些HTML数据，但我的问题是，当我检查浏览器时，HTML标记显示为文本，而不是元素
我的组件来源：
import React from 'react';
export class About extends React.Component{
constructor(props){
super(props);
this.state = {
data: '<p>Hello world</p>',
}
}
浏览 0提问于2020-02-25得票数 0
回答已采纳
在reactjs中，如何使用模板html数据呈现组件？ class Options extends React.Component {
render() {
const othList = [];
[1, 2, 3, 4, 5].forEach((t) => {
othList.push(t);
});
return othList;
}
} 如何传递html数据并使用提供的html作为模板？ <Options><div></div></
浏览 6提问于2020-04-21得票数 0
我的项目中有两个文件
index.html :包含reactjs组件挂载的“app-容器”
app.js :包含react组件的文件
我想在我的reactjs应用程序中使用facebook的“喜欢和分享”按钮。但我希望他们只出现在特定的时间点。
也就是说，我希望通过reactjs的render()函数来显示它们，而不是永久地显示在我的html页面上。
我走了以下路-
1.)我在我的index.html页面上添加了到的链接。
2.)我在呈现方法中添加了喜欢/共享按钮的代码插件。
<div class="fb-share-button" data-href=&
浏览 0提问于2015-12-16得票数 2
回答已采纳
2回答
我使用接收客户机输入的文本的组件，但是客户机碰巧输入代码(比如iframe)，而dangerouslySetInnerHTML让它呈现！我希望它在屏幕上显示代码(我已经尝试将其转换为字符串等)。但不是用来渲染的。
<p dangerouslySetInnerHTML={{ __html: message }}></p>
浏览 5提问于2021-01-15得票数 0
要验证我的站点(通用reactjs应用程序)，我需要在我的文档头添加一个带有验证码的HTML注释。我尝试在元标记和react-jsx-html-comments库上使用dangerouslySetInnerHTML，但似乎都失败了。
<meta name="verification" dangerouslySetInnerHTML={{__html: '<!-- 3215465 -->'}} />
我在server.js中包含了以下内容
res.send(`<!doctype html>${ReactDOM.renderToS
浏览 19提问于2016-09-27得票数 0
5回答
我玩的反应-草稿-wysiwyg编辑。我进步得很好。但是现在我坚持要如何显示编辑器的输出。
例如，假设主体是wysiwyg编辑器的输出：
function ShowHtml(props) {
let body = '<p>Sample text with <strong>bold</strong> and <em>italic</em></p>'
return (
<div>
{body}
</div>
)
}
现在输出将是完全相同的html，标
浏览 0提问于2018-03-21得票数 11
回答已采纳
我有一个非常具体的问题，所以:我在我的MySQL数据库中有一个中间文本。例如(带断线)：
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.
我想现在
浏览 0提问于2019-07-31得票数 0
回答已采纳
我一直在尝试弄清楚如何在这个组件中对这个label={item.description}应用dangerouslySetInnerHTML：
const SwitchList = ({
color,
disabled,
sortKey,
sortDirection = SORT_DIRECTION.ASC,
items,
data,
children,
onChange
}) => {
if (items.length === 0) {
return React.Children.only(children);
}
let sortPr
浏览 10提问于2019-07-15得票数 1
回答已采纳
我有一个包含JSX代码的JSON，即
var data = {"content":"<ul className='list-group'><li className='list-group-item' onClick={this.svgMapClicked}>Name: Firmino</li><li className='list-group-item' >Goals: 22</li></ul>"}
在我的组件中，首先我导入JSON，即
im
浏览 1提问于2018-03-15得票数 1
我现在有一个这样的反应组件：
<div id="product-content" className="bz">
<a className="anchor" id="content-anchor"></a>
<h2 className="title-section">Thông tin sản phẩm</h2>
<div className="fixed
浏览 7提问于2017-06-14得票数 4
回答已采纳
我有一个带有按钮和div的react组件。单击该按钮后，此div将填充来自服务器的ajax响应。
服务器响应为JSON格式，其中一个JSON属性包含带有HTML内容的字符串值。此属性值将分配给组件状态。
在输出中，我看到页面上显示了原始的HTML。我设法用'react-render-html‘包实现了这个功能。
现在，我需要将事件附加到其中包含某些类的一些HTML元素。对于jQuery，用于将事件附加到此类元素的.on('.classname')。有没有办法，我可以用React实现同样的效果。事件处理程序应该是组件内部的方法。
浏览 1提问于2019-07-01得票数 0
7回答
可以将SVG标记嵌入到ReactJS组件中吗？
render: function() {
return (
<span>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmln ...
</span>
);
}
导致错误的结果：
不支持命名空间属性。ReactJSX不是XML。
做这件事最简单的方法是什么？对于我想要做的事情来说，使用像这样的东西太夸张了。
浏览 130提问于2014-05-01得票数 144
回答已采纳
我在reactJS中遇到了一个不寻常的场景，端点正在发送一个对象。其中一个键的值为字符串HTML。
端点的结果是：
{
"contact_columns": [
{
"label": "Don't have a policy yet?",
"contactType": "URL",
"value": "https://broker.bolttech.vn/",
"subtextNode": {
"chi
浏览 5提问于2020-11-25得票数 0
回答已采纳
请找到我下面的代码。如何在reactjs呈现方法()中显示html标志。
<td>{ this.props.flag=="true" ? {⚐} : null} </td>
它的投掷错误。
浏览 5提问于2017-10-25得票数 0
回答已采纳
我是第一次接触reactjs，并且正在处理一个将json数据推送到模板的项目。
json结构
"description" : "Some text with a <a href=\"/de/datenschutz\">link</a> and another <a href=\"/de/cookie-richtlinie\">link</a>",
我建议在模板上使用以下内容
<p className='paragraph-margin-bottom-10 text--f
浏览 1提问于2017-06-06得票数 1
我想在我的react页面的特定位置包含linkedin follow按钮。如何将下面的标签呈现到div中？
<script src="//platform.linkedin.com/in.js" type="text/javascript"> lang: pt_BR</script>
<script type="IN/FollowCompany" data-id="xxxxx"></script>
谢谢。
浏览 8提问于2017-08-25得票数 0
我有一个API，它将我的响应作为电子邮件的数组返回，它是实际的电子邮件体(带有HTML标记、转义字符和样式)。
如果它是一个类似于这个-> "content“的HTML，我可以很容易地创建一个元素并将其innerHTML设置为这个值，但是我需要迭代字符串列表并在页面中显示它们，我正在使用ReactJS。
为寻找这样做的选择，请为同样的解决方案提出建议。
浏览 2提问于2019-08-22得票数 1
回答已采纳
1回答
在第一次加载时，我会将标记完全呈现为服务器上的数据。
这很好，客户端将其视为静态html，直到客户端反应接管为止。但是这个客户端代码将标记抛出。
我停止了在第一次加载时请求每个AJAX的数据的反应(因为它已经存在了)，只有当我使用一个反应性路由器<Link>导航客户端的时候。
但是，我不能强迫它简单地让标记是，直到用户与它交互。
浏览 5提问于2016-01-18得票数 1
回答已采纳
1回答
我有文件调用，ArrayCustomer.js包含这样的数组：
const ArrayCustomer = [
{
index:1,
kondisi: 'Daftar Baru',
badge: 'badge btn-warning',
},
{
index:2,
kondisi: 'Pelanggan dibawah 10m<sup>3</sup>',
badge: 'badge btn-secondary',
浏览 3提问于2020-02-20得票数 0
回答已采纳
嗨，我有一个场景，我需要添加这个来自服务器的HTML内容在一个元素和样式的电子邮件地址与蓝色。 来自服务器的HTML内容：： "<p>139, Sethiwan Tower,<br>
10th Floor, Pan Rd,<br>
Silom, Bang Rak,<br>
Bangkok 10500,<br>
Thailand
<br/>
<br/>
<strong>Call us</strong> <br/>
(Service hotline) +66 2 430
浏览 35提问于2021-01-14得票数 0
我是ReactJS noob，所以我遇到了这个可怕的问题:我得到了一个名为adminLink的变量，其中包含以下内容：
<span class="link" onclick="showLogin">Login</span>
我需要将它打印出来，作为HTML。如果我这样做的话
<div className="adminLink">
{adminLink}
</div>
我得到了文本，而不是
浏览 2提问于2014-12-08得票数 2
回答已采纳
我的后端服务(Elasticsearch percolator)使用html标签注释文本以突出显示匹配项。 我找不到一种在antd Table中显示这种html数据的方法。 我尝试过荧光笔组件，但它将关键字应用于整个列，但我需要在每一行突出显示不同的单词。 link to fiddle const { Table } = antd
class TableColor extends React.Component {
constructor (props) {
super(props)
this.state = {
data: []
}
}
浏览 247提问于2019-03-22得票数 5
回答已采纳
1回答
将JSON解析为HTML
、、、、
我从API中获取数据，数据的一个属性是对项的描述，但是JSON响应是用HTML编写的，其中包含<a></a>标记和其他html元素。我不想显示标签，让它们实际工作。
例如，这就是它输出到屏幕的内容：
“这是<a href='https://www.google.com'> Link </a>”
它应该是这样的：
“这是链接”
我怎样才能做到这一点？
(我正在使用Next.js)
我就是这样显示数据的
<p>{description}</p>
浏览 1提问于2021-11-15得票数 1
回答已采纳
2回答
我必须移动一个SVG图标从一个常规网站到一个ReactJS网站。为了使SVG与JSX兼容，必须对SVG进行一些修改，因此我已经删除了所有的':'s，并为JSX兼容性使用了camel case属性名。唯一的问题是d属性。
SVG现在看起来像：
<svg id="Logo" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlnsXlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
浏览 6提问于2017-08-21得票数 0
回答已采纳
我有这样的组件：
import React from 'react';
import Autolinker from 'autolinker';
class Comment extends React.Component{
constructor(props){
super(props);
}
render(){
return <li className="media comment">
<div className="image
浏览 4提问于2015-08-02得票数 9
回答已采纳
我有一个React类，它从JSON生成一个html元素的字符串：
import React, { Component } from "react";
import "./Maps.css";
import df3 from "./data/df3.json"
import sample from "./data/sample.json"
class Maps extends Component {
constructor() {
super();
const data = df3;
this.stat
浏览 1提问于2020-05-20得票数 0
我正在尝试创建一个mud (多用户地牢)客户端，使用Electron和ReactJS为自己学习和挑战自己。但看起来我这次挑战失败了。
我使用telnet-stream从服务器获取数据。
来自服务器的数据具有ansi代码，因为它是基于telnet的通信。
问题出在速度上。我不确定我这样做是否正确，但以下是负责显示数据的组件：
import React, { Component } from 'react';
import styles from './style.css';
type Props = {
output: Array<any>
};
浏览 12提问于2018-03-05得票数 0
1回答
我创建了两个组件App和Inner组件App包含一个表单。
我的内部组件包含一个const数据，我将其传递给dangerouslySetInnerHTML以设置内部html。所以可以有任意数量的输入字段。有时它可以有3到5个输入字段。
有可能有反应吗？正如我所看到的，在这种情况下，我不可能有双向绑定。
因为我认为这是不可能的反应？
export default function App() {
const handleSubmission = e => {
e.preventDefault();
};
return (
<div className=
浏览 3提问于2020-05-16得票数 2
回答已采纳
我有一个对象，我把英文翻译放在一个reactJs应用程序中，是否可以添加description.href的url，这样我就可以将description.paragraphe中的单词"here“作为一个链接，我已经将它添加为HTML，但我得到了html作为文本。
const EnMessages = {
ra: {
notation: {
base: 'out of',
read: 'Read the'
},
description: {
浏览 1提问于2021-12-28得票数 0
回答已采纳
我想在DOM中添加一些xml，以便其他组件可以访问它。但是，当我试图渲染它时，我总是会得到一些未知的错误，例如：
warning.js:36警告:未知道具colour在<category>标签上。从元素中移除这个支柱。有关详细信息，请参阅
我不想把这些属性解释为道具！它只是xml，而不是react组件！
这是我的代码：
class DefaultToolbox extends Component {
render() {
// static xml
return (
<xml id="toolbox" style={{d
浏览 2提问于2016-11-18得票数 3
回答已采纳
我必须使用reactjs呈现一个HTML模板。HTML模板是动态的，可以通过API调用。模板中有在html中绑定数据的规定。示例HTML模板如下，
<a target="_blank" href="{ad.url}">
<div class="ads temp-1">
<h2>{ad.name}</h2>
<div class="adv-content">
<div class="advs-im
浏览 2提问于2016-08-09得票数 2
回答已采纳
API后端响应以JSON的形式出现。一些JSON字段包含html字段，如
。React是将这个值呈现为string，因为这个html标记如下
不会生效。如何在反应中处理这件事。
For Ex. "hdjhjwjkhjj <br> hdnbjbj" to hdjhjwjkhjj <br> hdnbjbj .
浏览 4提问于2018-10-20得票数 0
回答已采纳
1回答
我在强迫元素像这样集中注意力
/**focusing the element if the element is active */
componentDidUpdate() {
console.log(this.activeElementContainer);
if(this.activeElementContainer!==undefined && this.activeElementContainer!==null) {
/** need to focus the active elemnent for t
浏览 0提问于2018-03-14得票数 0
回答已采纳
在我的项目中，我使用上下文将字符串翻译成各种语言。在我的项目中，我使用以下结构翻译字符串：
{Language.La_LAST_PURCHASE_PRICE}
其中"Language“指的是上下文，而"La_LAST_PURCHASE_PRICE”是上下文的关键，它可以工作并且没有任何问题。我有一个HTML格式的销售发票样式表，在运行程序并使用以下代码向用户显示发票后，我将其保存在数据库中并将其置于一种状态。
<div dangerouslySetInnerHTML = {{__html: this.state.currentStyleTheme}} />
在发票样
浏览 0提问于2019-05-31得票数 0
1回答
嗨，我正在使用咖啡脚本和ReactJS作为我的网站。到目前为止，我已经进行了一个平滑的开发，直到遇到带有散列表的字符串，然后将散列表转换为react元素。
反应元件
@HashtagLink = React.createClass
displayName: 'hashtag link'
render: ->
React.DOM.a null,
href:'/hashtag/' + @props.hashtag
@props.hashtag
JS函数
@hashTagToLink = (string) ->
s
浏览 2提问于2015-10-13得票数 0
3回答
我正在使用Thymeleaf和reactJS运行一个springboot应用程序。所有的reactJS文本都是通过在页面中使用th:text从message.properties中读取的，但是当我在HTML块中使用th:text时，reactJS似乎对此很生气。
render() {
return (
<input type="text" th:text="#{home.welcome}">
)
}
错误是：
Namespace tags are not supported. ReactJSX is not XML.
除了使用da
浏览 1提问于2016-02-20得票数 15
回答已采纳
如果模板脚本标记驻留在我的组件的render函数中，我会得到以下错误：
在火狐中：|类型错误: Node.removeChild的参数%1不是对象。|
在Chrome中：|未捕获TypeError:无法读取null的属性'hasAttribute‘|
如果将模板脚本标记放在文档的静态部分，则一切正常。有什么想法吗？
下面是我的代码：
let React = require('react');
let ReactDOM = require('react-dom');
let qq = require('fine-uploader/fine-upl
浏览 2提问于2016-09-12得票数 0
我将一些编辑器输出保存到数据库中。包含html代码的输出被转换为如下所示的字符串：
"<p><span style='color: rgb(43, 51, 94); font-size: 14px; font-style: normal; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;'>Some Content...</span> v</p>"
我从数据库中获得了
浏览 3提问于2020-01-31得票数 1
回答已采纳
在基于ReactJS的应用程序中，我需要：
var _ = React.DOM;
_.span(null, 'some text', _.select(null, ...));
问题是：“一些文本”被包装在DOM中的额外span元素中。有没有办法避免这种行为，只输出原始文本？
要说清楚:我想输出
<span>some text<select>...</select></span>
不
<span><span>some text</span><select>...</select
浏览 8提问于2014-06-28得票数 43
回答已采纳
我正在呈现来自API调用的JSX。API调用返回10个对象数组的JSON，并使用this.setState({Posts: JSON.Array})设置该数组，然后执行以下操作：
render(){
return(<div>
{this.state.Posts.map(post=>(<div> <span>2018-07-10</span>
<h2>{post.title.rendered}</h2>
<p>{post.excerpt.rendered}</p></div>))}
浏览 0提问于2018-07-16得票数 0
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
云直播
对象存储活动推荐
腾讯云开发者
