Reactjs chuyển đổi chuỗi html sang jsx

Tôi đang gặp sự cố khi xử lý ReactJS của facebook. Bất cứ khi nào tôi làm ajax và muốn hiển thị dữ liệu html, ReactJS sẽ hiển thị dưới dạng văn bản. (Xem hình bên dưới)

Dữ liệu được hiển thị thông qua chức năng gọi lại thành công của Ajax jquery.

$.ajax({
   url: url here,
   dataType: "json",
   success: function(data) {
      this.setState({
           action: data.action
      })
   }.bind(this)
});

Có cách nào dễ dàng để chuyển đổi nó thành html không? Tôi nên làm thế nào khi sử dụng ReactJS?

Theo mặc định, React thoát khỏi HTML để ngăn XSS (kịch bản chéo trang) . Nếu bạn thực sự muốn kết xuất HTML, bạn có thể sử dụng thuộc dangerouslySetInnerHTMLtính:

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

React buộc cú pháp rườm rà có chủ ý này để bạn không vô tình kết xuất văn bản dưới dạng HTML và giới thiệu các lỗi XSS.

Hiện nay có các phương pháp an toàn hơn để thực hiện điều này. Các tài liệu đã được cập nhật với các phương pháp này.

Các phương pháp khác

1. Dễ nhất - Sử dụng Unicode, lưu tệp dưới dạng UTF-8 và đặt thành charsetUTF-8.

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

2. An toàn hơn - Sử dụng số Unicode cho thực thể bên trong chuỗi Javascript.

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

   hoặc là

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

3. Hoặc một mảng hỗn hợp với các chuỗi và các phần tử JSX.

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

4. Phương sách cuối cùng - Chèn HTML thô bằng cách sử dụng dangerouslySetInnerHTML.

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

Tôi khuyên bạn nên sử dụng interweave tạo ra bởi milesj . Đây là một thư viện hiện tượng sử dụng một số nếu các kỹ thuật khéo léo để phân tích cú pháp và chèn HTML vào DOM một cách an toàn.

Interweave là một thư viện phản ứng để kết xuất HTML một cách an toàn, các thuộc tính bộ lọc, văn bản tự động với các công cụ đối sánh, kết xuất các ký tự biểu tượng cảm xúc và nhiều hơn nữa.

• Interweave là một thư viện React mạnh mẽ có thể:
  • Kết xuất HTML một cách an toàn mà không cần sử dụng nguy hiểm SetInnerHTML.
  • Tháo thẻ HTML an toàn.
  • XSS tự động và bảo vệ tiêm.
  • Làm sạch các thuộc tính HTML bằng các bộ lọc.
  • Nội suy các thành phần bằng cách sử dụng khớp.
  • Tự động điền URL, IP, email và hashtag.
  • Kết xuất biểu tượng cảm xúc và biểu tượng cảm xúc.
  • Và nhiều hơn nữa!

Ví dụ sử dụng:

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>

tôi tìm thấy fs js này. cái này hoạt động như thế này

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>

liên kết jsfiddle

Bạn cũng có thể sử dụng Parser () từ html-Reac-Parser. Tôi đã sử dụng tương tự. Liên kết chia sẻ.

tôi bắt đầu sử dụng gói npm có tên Reac-html-Parser

Đối với những người vẫn đang thử nghiệm, npm cài đặt Reac-html-Parser

Khi tôi cài đặt, nó có 123628 lượt tải hàng tuần.

import ReactHtmlParser from 'react-html-parser'

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

Bạn có thể sử dụng như sau nếu bạn muốn kết xuất html thô trong React

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

Ví dụ - Kết xuất

Kiểm tra là một ngày tốt