我在处理facebook的ReactJS时遇到了麻烦。每当我使用ajax并想要显示html数据时，ReactJS将其显示为文本。(见下图)
数据通过jquery Ajax的成功回调函数显示。
$.ajax({
url: url here,
dataType: "json",
success: function(data) {
this.setState({
action: data.action
})
}.bind(this)
});
有没有什么简单的方法把它转换成html?我应该如何使用ReactJS?
当前回答
默认情况下，React会转义HTML以防止XSS(跨站脚本)。如果你真的想渲染HTML，你可以使用dangerlysetinnerhtml属性:
<td dangerouslySetInnerHTML={{__html: this.state.actions}} />
React强制使用这种有意为之的繁琐语法，这样您就不会意外地将文本呈现为HTML并引入XSS错误。
其他回答
你也可以从html-react-parser中使用Parser()。 我也用过。连接共享。
如果你想在React中渲染原始html，可以使用下面的方法
<div dangerouslySetInnerHTML={{__html: `html-raw-goes-here`}} />
示例-渲染 考试是个好日子
我推荐使用milesj创建的Interweave。它是一个非凡的库，使用了许多巧妙的技术来解析HTML并安全地将其插入DOM。
Interweave是一个react库，可以安全地渲染HTML，过滤 属性，自动抓取文本与匹配器，渲染表情符号字符，和 更多。
Interweave是一个健壮的React库，可以: 安全地渲染HTML而不使用dangerlysetinnerhtml。 安全地剥离HTML标记。 自动XSS和注射保护。 使用过滤器清洁HTML属性。 使用匹配器插入组件。 自动链接url, ip，电子邮件和标签。 渲染表情符号和表情符号字符。 还有更多!
使用的例子:
import React from 'react';
import { Markup } from 'interweave';
const articleContent = "<p><b>Lorem ipsum dolor laboriosam.</b> </p><p>Facere debitis impedit doloremque eveniet eligendi reiciendis <u>ratione obcaecati repellendus</u> culpa? Blanditiis enim cum tenetur non rem, atque, earum quis, reprehenderit accusantium iure quas beatae.</p><p>Lorem ipsum dolor sit amet <a href='#testLink'>this is a link, click me</a> Sunt ducimus corrupti? Eveniet velit numquam deleniti, delectus <ol><li>reiciendis ratione obcaecati</li><li>repellendus culpa? Blanditiis enim</li><li>cum tenetur non rem, atque, earum quis,</li></ol>reprehenderit accusantium iure quas beatae.</p>"
<Markup content={articleContent} /> // this will take the articleContent string and convert it to HTML markup. See: https://milesj.gitbook.io/interweave
//to install package using npm, execute the command
npm install interweave
这可以通过使用块{[]}中的内容来解决。为了更清楚，可以参考下面的示例。
{[
'abc',
<b>my bold</b>,
'some other text'
]}
这将保留标签下文本的格式，而其他文本将作为纯文本打印。
我发现了这把js小提琴。它是这样工作的
function unescapeHTML(html) {
var escapeEl = document.createElement('textarea');
escapeEl.innerHTML = html;
return escapeEl.textContent;
}
<textarea className="form-control redactor"
rows="5" cols="9"
defaultValue={unescapeHTML(this.props.destination.description)}
name='description'></textarea>
JSFIDDLE 链接
