React.js将HTML字符串转换为JSX

2020/10/14 02:41 · javascript ·  · 0评论

我在处理Facebook的ReactJS时遇到问题。每当我执行ajax并想要显示html数据时,ReactJS会将其显示为文本。(见下图)

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链接

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

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

import ReactHtmlParser from 'react-html-parser'

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

您也可以从html-react-parser使用Parser()。我用过一样的。链接已共享。

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

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

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

示例-渲染

测试是美好的一天

本文地址:http://javascript.askforanswer.com/react-jsjianghtmlzifuchuanzhuanhuanweijsx.html
文章标签: ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!