Reactjs转换为html

Question

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

Answer 1

默认情况下,React会转义HTML以阻止XSS(跨站点脚本).如果您确实要呈现HTML,可以使用以下dangerouslySetInnerHTML属性:

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

React强制这种有意识的麻烦语法,这样你就不会意外地将文本呈现为HTML并引入XSS错误.

Answer 2

现在有更安全的方法来实现这一目标.该文档已更新,使用这些方法.

其他方法

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

Answer 3

我建议使用交织所创造milesj.它是一个非凡的库,它使用一些巧妙的技术来解析并安全地将HTML插入到DOM中.

Interweave是一个反应库,可以安全地呈现HTML,过滤属性,使用匹配器自动换行文本,渲染表情符号字符等等.

• Interweave是一个强大的React库,可以:
  • 无需使用dangerouslySetInnerHTML即可安全地呈现HTML.
  • 安全地剥离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

Answer 4

npm i html-react-parser;

import Parser from 'html-react-parser';

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

Answer 5

对于那些仍在试验中的人， npm install react-html-parser

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

import ReactHtmlParser from 'react-html-parser'

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

Answer 6

{[]}这可以通过使用像这样放入此块中的内容来解决。为了更清楚起见，可以参考下面的示例。

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

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

Answer 7

如果要在 React 中呈现原始 html，可以使用以下命令

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

示例 - 渲染

考试是个好日子

Answer 8

i found this js fiddle. this works like this

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 link

Answer 9

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