Reactjs转换为HTML
我无法处理Facebook的ReactJS。 每当我做一个Ajax，并希望显示一个HTML数据，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错误。
现在有更安全的方法来实现这一点。 文档已经用这些方法更新了。
其他方法
-
最简单 – 使用Unicode，将文件保存为UTF-8并将
charset设置为UTF-8。<div>{'First · Second'}</div> -
更安全 – 在Javascriptstring内使用Unicode编号。
<div>{'First \u00b7 Second'}</div>要么
<div>{'First ' + String.fromCharCode(183) + ' Second'}</div> -
或者是一个带有string和JSX元素的混合数组。
<div>{['First ', <span>·</span>, ' Second']}</div> -
Last Resort – 使用
dangerouslySetInnerHTML插入原始HTML。<div dangerouslySetInnerHTML={{__html: 'First · 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，电子邮件和主题标签。
- 呈现表情符号和表情符号。
- 以及更多！
