javascript - ReactJS konverter HTML-streng til JSX

Jeg har problemer med å håndtere Facebooks ReactJS. Hver gang jeg gjør ajax og vil vise HTML-data, viser ReactJS det som tekst. (Se figur nedenfor)

Dataene vises gjennom suksess-tilbakekallingsfunksjonen i jQuery Ajax.

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

Finnes det noen enkel måte å konvertere dette til html på? Hvordan bør jeg gjøre det ved bruk av ReactJS?

Svar #1

Som standard unngår React at HTML tolkes for å forhindre XSS (Cross-site scripting). Hvis du virkelig vil gjengi HTML, kan du bruke egenskapen dangerouslySetInnerHTML:

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

React tvinger denne bevisst tungvinte syntaksen slik at du ikke ved et uhell gjengir tekst som HTML og introduserer XSS-feil.

Svar #2

Det finnes nå sikrere metoder for å oppnå dette. Dokumentasjonen har blitt oppdatert med disse metodene.

Andre metoder

  1. Enklest - Bruk Unicode, lagre filen som UTF-8 og sett charset til UTF-8.

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

  2. Sikrere - Bruk Unicode-nummeret for enheten inne i en Javascript-streng.

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

eller

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

  1. Eller et blandet array med strenger og JSX-elementer.

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

  2. Siste Utvei - Sett inn rå HTML ved å bruke dangerouslySetInnerHTML.

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

Svar #3

Jeg anbefaler å bruke Interweave laget av milesj. Det er et fenomenalt bibliotek som gjør bruk av en rekke geniale teknikker for å analysere og trygt sette inn HTML i DOM-en.

Interweave er et React-bibliotek for å trygt gjengi HTML, filtrere attributter, automatisk pakke inn tekst med matchere, gjengi emoji-tegn, og mye mer.

  • Interweave er et robust React-bibliotek som kan:
  • Render HTML trygt uten å bruke dangerouslySetInnerHTML.
  • Fjern HTML-tagger på en sikker måte.
  • Automatisk beskyttelse mot XSS og injeksjon.
  • Rens HTML-attributter ved hjelp av filtre.
  • Interpoler komponenter ved bruk av matchere.
  • Autolink URL-er, IP-er, e-poster og hashtags.
  • Gjengi emoji- og emotikon-tegn.
  • Og mye mer!

Brukseksempel:

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

Svar #4

npm i html-react-parser;

import Parser from 'html-react-parser';

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

Svar #5

For de som fortsatt eksperimenterer, npm install react-html-parser

Da jeg installerte det, hadde det 123628 ukentlige nedlastinger.

import ReactHtmlParser from 'react-html-parser'

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

Svar #6

Du kan bruke følgende hvis du vil gjengi rå HTML i React

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

Eksempel - Gjengi

Test is a good day

Relaterte artikler