Reactjs转换为HTML

我无法处理Facebook的ReactJS。 每当我做一个Ajax,并希望显示一个HTML数据,ReactJS显示为文本。 (见下图)

ReactJS呈现字符串

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

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

在这里输入图像描述

有没有简单的方法将其转换为HTML? 我应该如何使用ReactJS来做到这一点?

默认情况下,React转义HTML以防止XSS。 如果你真的想渲染HTML,你可以使用dangerouslySetInnerHTML属性:

 <td dangerouslySetInnerHTML={{__html: this.state.actions}} /> 

React强制使用这个有意思的繁琐的语法,这样就不会不小心将文本呈现为HTML并引入XSS错误。

现在有更安全的方法来实现这一点。 文档已经用这些方法更新了。

其他方法

  1. 最简单 – 使用Unicode,将文件保存为UTF-8并将charset设置为UTF-8。

    <div>{'First · Second'}</div>

  2. 更安全 – 在Javascriptstring内使用Unicode编号。

    <div>{'First \u00b7 Second'}</div>

    要么

    <div>{'First ' + String.fromCharCode(183) + ' Second'}</div>

  3. 或者是一个带有string和JSX元素的混合数组。

    <div>{['First ', <span>&middot;</span>, ' Second']}</div>

  4. Last Resort – 使用dangerouslySetInnerHTML插入原始HTML。

    <div dangerouslySetInnerHTML={{__html: 'First &middot; Second'}} />

我发现这个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链接

我build议使用由milesj创build的交织 。 它是一个惊人的库,它使用一些数字,如果巧妙的技术来parsing和安全地插入到DOM的HTML。

交织是一个反应库,可以安全地呈现HTML,filter属性,使用匹配器自动擦除文本,渲染表情符号等等。

  • 交织是一个强大的React库,可以:
    • 安全地呈现HTML而不使用危险的SetInnerHTML。
    • 安全地去除HTML标签。
    • 自动XSS和注射保护。
    • 使用filter清理HTML属性。
    • 使用匹配器插补组件。
    • 自动链接URL,IP,电子邮件和主题标签。
    • 呈现表情符号和表情符号。
    • 以及更多!