Reactjs แปลงสตริง html เป็น jsx

ฉันมีปัญหาในการจัดการกับ ReactJS ของ Facebook เมื่อใดก็ตามที่ฉันทำ 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 (cross-site scripting) หากคุณต้องการแสดงผล HTML จริงๆคุณสามารถใช้dangerouslySetInnerHTMLคุณสมบัติ:

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

ตอบสนองต่อการบังคับใช้ไวยากรณ์ที่ยุ่งยากนี้โดยเจตนาเพื่อให้คุณไม่แสดงข้อความเป็น HTML โดยไม่ได้ตั้งใจและแนะนำบั๊ก XSS

ขณะนี้มีวิธีการที่ปลอดภัยกว่าเพื่อให้บรรลุเป้าหมายนี้ เอกสารได้รับการปรับปรุงด้วยวิธีการเหล่านี้

วิธีอื่น ๆ

1. ง่ายที่สุด - ใช้ Unicode บันทึกไฟล์เป็น UTF-8 และตั้งค่าเป็นcharsetUTF-8

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

2. ปลอดภัยยิ่งขึ้น - ใช้หมายเลข Unicode สำหรับเอนทิตีภายในสตริง Javascript

   <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 เป็นห้องสมุดโต้ตอบเพื่อแสดง HTML อย่างปลอดภัยคุณลักษณะตัวกรองคัดลอกข้อความอัตโนมัติด้วยโปรแกรมจับคู่แสดงอักขระอิโมจิและอีกมากมาย

• Interweave เป็นห้องสมุดปฏิกิริยาที่แข็งแกร่งที่สามารถ:
  • แสดง HTML อย่างปลอดภัยโดยไม่ต้องใช้ harmlySetInnerHTML
  • ถอนแท็ก HTML อย่างปลอดภัย
  • XSS อัตโนมัติและการป้องกันการฉีด
  • ล้างแอตทริบิวต์ HTML โดยใช้ตัวกรอง
  • แก้ไขส่วนประกอบโดยใช้เครื่องมือจับคู่
  • URL อัตโนมัติ, IP, อีเมลและแฮชแท็ก
  • แสดงอักขระ Emoji และอิโมติคอน
  • และอีกมากมาย!

ตัวอย่างการใช้งาน:

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

คุณยังสามารถใช้ Parser () จาก html-react-parser ฉันใช้เหมือนกัน ลิงก์ที่แชร์

ฉันเริ่มใช้แพ็คเกจ npm ชื่อ react-html-parser

สำหรับผู้ที่ยังทำการทดลองอยู่ให้ติดตั้ง NPM react-html-parser

เมื่อฉันติดตั้งมันก็มีการดาวน์โหลด 123628 รายสัปดาห์

import ReactHtmlParser from 'react-html-parser'

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

คุณสามารถใช้สิ่งต่อไปนี้หากคุณต้องการแสดงผล html ดิบใน React

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

ตัวอย่าง - เรนเดอร์

การทดสอบเป็นวันที่ดี