Reactjs HTML dizesini jsx'e dönüştürür

Facebook ReactJS ile uğraşırken sorun yaşıyorum. Ne zaman ajax yapmak ve bir html veri görüntülemek istediğinizde, ReactJS bunu metin olarak görüntüler. (Aşağıdaki şekle bakın)

Veriler, jquery Ajax'ın başarılı geri çağırma işlevi aracılığıyla görüntülenir.

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

Bunu html'ye dönüştürmenin kolay bir yolu var mı? ReactJS kullanarak nasıl yapmalıyım?

Varsayılan olarak React, XSS'yi (Siteler arası komut dosyası oluşturma) önlemek için HTML'den kaçar . Gerçekten HTML oluşturmak istiyorsanız, dangerouslySetInnerHTMLözelliği kullanabilirsiniz :

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

React, bunu kasıtlı olarak hantal bir sözdizimini zorlar, böylece yanlışlıkla metni HTML olarak oluşturmaz ve XSS hataları sunmazsınız.

Bunu başarmak için artık daha güvenli yöntemler var. Docs güncellendi bu yöntemlerle.

Öbür metodlar

1. En kolay - Unicode'u kullanın, dosyayı UTF-8 olarak kaydedin ve UTF-8 olarak ayarlayın charset.

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

2. Daha Güvenli - Bir Javascript dizesindeki varlık için Unicode numarasını kullanın.

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

   veya

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

3. Veya dizeleri ve JSX öğeleri içeren karışık bir dizi.

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

4. Last Resort - kullanarak ham HTML ekleyin dangerouslySetInnerHTML.

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

Ben kullanmanızı tavsiye dokumak yarattığı milesj . HTML içine ayrıştırmak ve güvenli bir şekilde DOM içine HTML eklemek için bir akıllı teknikler bir sayı kullanan olağanüstü bir kütüphane.

Interweave, HTML'yi güvenle filtrelemek, nitelikleri filtrelemek, eşleştiricilerle otomatik kaydırma metni, emoji karakterleri oluşturmak ve çok daha fazlasını yapmak için bir reaksiyon kütüphanesidir.

• Interweave şunları yapabilen sağlam bir React kütüphanesidir:
  • DangerouslySetInnerHTML kullanmadan HTML'yi güvenle oluşturun.
  • HTML etiketlerini güvenle çıkarın.
  • Otomatik XSS ve enjeksiyon koruması.
  • Filtreleri kullanarak HTML niteliklerini temizleyin.
  • Eşleştiriciler kullanarak bileşenleri enterpolasyonlayın.
  • URL'leri, IP'leri, e-postaları ve hashtag'leri otomatik olarak bağlayın.
  • Emoji ve ifade karakterleri oluşturun.
  • Ve daha fazlası!

Kullanım Örneği:

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>

Bu js keman buldum. bu böyle çalışıyor

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 bağlantısı

Ayrıca html-tepki-ayrıştırıcıdan Parser () öğesini de kullanabilirsiniz. Ben de aynısını kullandım. Bağlantı paylaşıldı.

reakt-html-ayrıştırıcı adlı npm paketi kullanmaya başladım

Hala deneyenler için npm install tepki-html-ayrıştırıcı

Yüklediğimde haftalık 123628 indirme yapıldı.

import ReactHtmlParser from 'react-html-parser'

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

React'te raw html oluşturmak istiyorsanız aşağıdakileri kullanabilirsiniz

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

Örnek - Oluştur

Test güzel bir gün