我在处理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?
当前回答
对于那些还在尝试的人，npm安装react-html-parser
当我安装它时，它的周下载量是123628次。
import ReactHtmlParser from 'react-html-parser'
<div>{ReactHtmlParser(htmlString)}</div>
其他回答
我开始使用NPM包react-html-parser
这可以通过使用块{[]}中的内容来解决。为了更清楚，可以参考下面的示例。
{[
'abc',
<b>my bold</b>,
'some other text'
]}
这将保留标签下文本的格式，而其他文本将作为纯文本打印。
默认情况下，React会转义HTML以防止XSS(跨站脚本)。如果你真的想渲染HTML，你可以使用dangerlysetinnerhtml属性:
<td dangerouslySetInnerHTML={{__html: this.state.actions}} />
React强制使用这种有意为之的繁琐语法，这样您就不会意外地将文本呈现为HTML并引入XSS错误。
对于那些还在尝试的人，npm安装react-html-parser
当我安装它时，它的周下载量是123628次。
import ReactHtmlParser from 'react-html-parser'
<div>{ReactHtmlParser(htmlString)}</div>
现在有更安全的方法来实现这一点。文档已经更新了这些方法。
其他方法
Easiest - Use Unicode, save the file as UTF-8 and set the charset to UTF-8. <div>{'First · Second'}</div> Safer - Use the Unicode number for the entity inside a Javascript string. <div>{'First \u00b7 Second'}</div> or <div>{'First ' + String.fromCharCode(183) + ' Second'}</div> Or a mixed array with strings and JSX elements. <div>{['First ', <span>·</span>, ' Second']}</div> Last Resort - Insert raw HTML using dangerouslySetInnerHTML. <div dangerouslySetInnerHTML={{__html: 'First · Second'}} />
