React.js将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，则可以使用dangerouslySetInnerHTML属性：

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

React强制使用这种故意繁琐的语法，这样您就不会意外地将文本呈现为HTML并引入XSS错误。

现在有更安全的方法可以完成此操作。该文档已更新，使用这些方法。

其他方法

1. 最简单 -使用Unicode，将文件另存为UTF-8并将其设置charset为UTF-8。

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

2. 更安全 -在Javascript字符串中为实体使用Unicode数字。

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

   要么

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

3. 或包含字符串和JSX元素的混合数组。

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

4. 不得已 -使用插入原始HTML dangerouslySetInnerHTML。

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

我建议使用交织产生的milesj。它是一个了不起的库，它利用许多巧妙的技术来解析和安全地将HTML插入DOM。

Interweave是一个React库，用于安全地呈现HTML，过滤器属性，使用匹配器自动换行文本，呈现表情符号字符等等。

• Interweave是一个强大的React库，可以：
  • 安全地呈现HTML，而无需使用dragonallySetInnerHTML。
  • 安全地剥离HTML标记。
  • 自动XSS和注入保护。
  • 使用过滤器清除HTML属性。
  • 使用匹配器内插组件。
  • 自动链接URL，IP，电子邮件和主题标签。
  • 渲染表情符号和表情符号字符。
  • 以及更多！

用法示例：

import React from 'react';
import { Markup } from 'interweave';

const articleContent = "<p><b>Lorem ipsum dolor laboriosam.</b> </p><p>Facere debitis impedit doloremque eveniet eligendi reiciendis <u>ratione obcaecati repellendus</u> culpa? Blanditiis enim cum tenetur non rem, atque, earum quis, reprehenderit accusantium iure quas beatae.</p><p>Lorem ipsum dolor sit amet <a href='#testLink'>this is a link, click me</a> Sunt ducimus corrupti? Eveniet velit numquam deleniti, delectus  <ol><li>reiciendis ratione obcaecati</li><li>repellendus culpa? Blanditiis enim</li><li>cum tenetur non rem, atque, earum quis,</li></ol>reprehenderit accusantium iure quas beatae.</p>"

<Markup content={articleContent} /> // this will take the articleContent string and convert it to HTML markup. See: https://milesj.gitbook.io/interweave


//to install package using npm, execute the command
npm install interweave

npm i html-react-parser;

import Parser from 'html-react-parser';

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

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

您还可以使用html-react-parser中的Parser（）。我用过一样的。链接已共享。

我开始使用名为react-html-parser的npm包

对于仍在尝试的人，npm install react-html-parser

当我安装它时，它每周下载123628。

import ReactHtmlParser from 'react-html-parser'

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

如果您想在React中呈现原始HTML，可以使用以下内容

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

示例-渲染

测试是美好的一天