Reactjs将html字符串转换为jsx

问题描述 投票:187回答:7

我在处理Facebook的ReactJS时遇到问题。每当我执行ajax并想要显示html数据时,ReactJS会将其显示为文本。 (请参见下图)

“

数据通过jQuery Ajax的成功回调函数显示。

$.ajax({
   url: url here,
   dataType: "json",
   success: function(data) {
      this.setState({
           action: data.action
      })
   }.bind(this)
});

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS81MlRxMS5wbmcifQ==” alt =“在此处输入图像描述”>“ >>

有没有简单的方法可以将其转换为html?我应该如何使用ReactJS?

我在处理Facebook的ReactJS时遇到问题。每当我执行ajax并想要显示html数据时,ReactJS会将其显示为文本。 (参见下图)通过成功显示数据...

javascript jquery ajax reactjs
7个回答
375
投票

默认情况下,React会转义HTML以防止XSS (Cross-site scripting)。如果您确实要呈现HTML,则可以使用dangerouslySetInnerHTML属性:


72
投票

现在有更安全的方法可以完成此操作。 <td dangerouslySetInnerHTML={{__html: this.state.actions}} /> 使用这些方法。


23
投票

我建议使用<div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />创建的Interweave。它是一个了不起的库,它利用许多巧妙的技术来解析并安全地将HTML插入DOM。


5
投票

我发现了这个js小提琴。像这样工作


3
投票

您还可以使用html-react-parser中的Parser()。我用过一样的。 jsfiddle分享了。


2
投票

我开始使用名为react-html-parser的npm包


0
投票

npm i html-react-parser;

© www.soinside.com 2019 - 2024. All rights reserved.