我在处理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?


当前回答

这可以通过使用块{[]}中的内容来解决。为了更清楚,可以参考下面的示例。

{[
   'abc',
   <b>my bold</b>, 
   'some other text'
]} 

这将保留标签下文本的格式,而其他文本将作为纯文本打印。

其他回答

npm i html-react-parser;

import Parser from 'html-react-parser';

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

对于那些还在尝试的人,npm安装react-html-parser

当我安装它时,它的周下载量是123628次。

import ReactHtmlParser from 'react-html-parser'

<div>{ReactHtmlParser(htmlString)}</div>

你也可以从html-react-parser中使用Parser()。 我也用过。连接共享。

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

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

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

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