Inserisci HTML con React Variable Statements (JSX)

204

Sto costruendo qualcosa con React dove devo inserire HTML con React Variables in JSX. C'è un modo per avere una variabile in questo modo:

var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

e inserirlo in reagire in questo modo, e farlo funzionare?

render: function() {
    return (
        <div className="content">{thisIsMyCopy}</div>
    );
}

e ha inserito l'HTML come previsto? Non ho visto o sentito nulla su una funzione di reazione che potrebbe fare questo in linea, o un metodo di analisi delle cose che permetterebbe a questo di funzionare.

— Kyle Hotchkiss
fonte

296

Puoi usare pericolosamenteSetInnerHTML , ad es

render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}

— Douglas
fonte

2

Come funziona se devi aggiungere qualcosa <head>?

— Danielle Madeley,

I normali metodi DOM in componentDidMount dovrebbero funzionare, ma non l'ho mai fatto prima.

— Douglas,

@DanielleMadeley Stai cercando di inserire commenti IE condizionali in <head>? Se è così, ho avuto successo usando il trucco descritto qui: nemisj.com/conditional-ie-comments-in-react-js

— Cam Jackson

3

Assicurati di passare un metodo a dangerouslySetInnerHTML e non un hash. Secondo i documenti, è pericoloso passare un hash. Riferimento: facebook.github.io/react/tips/dangerously-set-inner-html.html

— criticerz

1

C'è un modo senza inserire il div?

— amico

102

Nota che dangerouslySetInnerHTMLpuò essere pericoloso se non sai cosa c'è nella stringa HTML che stai iniettando. Questo perché il codice lato client dannoso può essere iniettato tramite tag script.

È probabilmente una buona idea disinfettare la stringa HTML tramite un'utilità come DOMPurify se non si è sicuri al 100% che l'HTML che si sta visualizzando sia sicuro XSS (cross-site scripting).

Esempio:

import DOMPurify from 'dompurify'

const thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';


render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(thisIsMyCopy)}}></div>
    );
}

— Yo Wakita
fonte

@vsync no, non dovrebbe :)

— Artem Bernatskyi,

1

è possibile eseguire il rendering non solo di tag html ma tag da libreria come materiale Ui tag Alert. voglio che il codice sia così

import DOMPurify from 'dompurify'  const thisIsMyCopy = '<Alert severity="warning">copy copy copy <strong>strong copy</strong></Alert >';   render: function() {     return (         <div className="content" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(thisIsMyCopy)}}></div>     ); }

— sasha romanov

@sasharomanov, hai avuto qualche soluzione per questo scenario?

— Nimish goel,

51

dangerouslySetInnerHTML ha molti svantaggi perché è impostato all'interno del tag.

Ti suggerisco di usare un po 'di wrapper di reazione come ho trovato qui su npm per questo scopo. html-reazioni-parser fa lo stesso lavoro.

import Parser from 'html-react-parser';
var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';


render: function() {
    return (
        <div className="content">{Parser(thisIsMyCopy)}</div>
    );
}

Molto semplice :)

— user2903536
fonte

3

"dangerouslySetInnerHTML ha molti svantaggi perché è impostato all'interno del tag." Puoi spiegare di più al riguardo. Cercando di capire quale differenza fondamentale ci sia tra html-reagire-parser e sanitized innerHtml

— dchhetri

Sembra che html-reazioni-parser non disinfetta l'input - vedi le FAQ

— Little Brain,

28

Usando ''lo stai trasformando in stringa. Usare senza virgolette capovolte funzionerà bene.

— iamnotbatma
fonte

14

In un primo momento ho riso e poi ho dato una possibilità che mi ha colpito la mente

— M al

1

Di gran lunga la risposta più semplice soprattutto se l'HTML è scritto da te e dinamico in base all'input dell'utente. Puoi letteralmente impostare var myHtml = Alcuni testi ; e funziona

— pat8719,

1

Questa è la risposta migliore Grazie compagno!

— Andy Mercer,

3

Per evitare errori di linter, lo uso in questo modo:

  render() {
    const props = {
      dangerouslySetInnerHTML: { __html: '<br/>' },
    };
    return (
        <div {...props}></div>
    );
  }

— Tudor Morar
fonte

3

import { Fragment } from 'react' // react version > 16.0

var thisIsMyCopy = (
  <Fragment>
    <p>copy copy copy&nbsp;
    <strong>strong copy</strong>
    </p>
  </Fragment>
)

Usando '' imposta il valore su una stringa e React non ha modo di sapere che si tratta di un elemento HTML. Puoi fare quanto segue per far sapere a React che si tratta di un elemento HTML -

Rimuovere ''e funzionerebbe
Utilizzare <Fragment>per restituire un elemento HTML.

— Amandeep Singh Ghai
fonte

2

Questo non risponde alla domanda. Il contenuto thisIsMyCopyè JSX stesso, non una stringa di HTML. Quindi stai letteralmente incollando JSX in JSX.

— Antares42,

Puoi trovare Frammenti anche in Preact ma solo nella versione X e successive.

— Nasia Makrygianni,

-3

Se qualcun altro atterra ancora qui. Con ES6 puoi creare la tua variabile html in questo modo:

render(){
    var thisIsMyCopy = (
        <p>copy copy copy <strong>strong copy</strong></p>
    );
    return(
        <div>
            {thisIsMyCopy}
        </div>
    )
}

— Harry
fonte

2

e se vuoi variabili all'interno della tua stringa, dovrai racchiuderle ciascuna {}e l'intera stringa in qualche markup in questo modo({telephoneNumber} {email})

— DanV,

2

Questo è diverso da quello che viene posto nella domanda. Nella domanda copy copy copy strong copyè una stringa. Ce l'hai come JSX.

— YPCrumble

4

Questo non è ES6, ma JSX

— gztomas,

-3

Puoi anche includere questo HTML in ReactDOM in questo modo:

var thisIsMyCopy = (<p>copy copy copy <strong>strong copy</strong></p>);

ReactDOM.render(<div className="content">{thisIsMyCopy}</div>, document.getElementById('app'));

Ecco due link link e link2 dalla documentazione di React che potrebbero essere utili.

— prateria
fonte