ReactJS转换HTML字符串到JSX

我在处理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错误。

2013-10-09 16:34:22

其他回答

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

2016-01-22 23:58:41

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

其他方法

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'}} />

2015-01-14 08:10:10

如果你想在React中渲染原始html，可以使用下面的方法

<div dangerouslySetInnerHTML={{__html: `html-raw-goes-here`}} />

示例-渲染考试是个好日子

2020-06-15 14:19:05

npm i html-react-parser;

import Parser from 'html-react-parser';

<td>{Parser(this.state.archyves)}</td>

2019-12-02 05:28:06

我开始使用NPM包react-html-parser

2018-08-14 09:24:09

ReactJS转换HTML字符串到JSX

推荐文章

最新文章

标签