Inserisci HTML con React Variable Statements (JSX)

Question

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 ad inserirla nel reagire in questo modo, e farli funzionare?

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

e inserire l'HTML come previsto? Non ho visto né sentito nulla di una funzione di reazione che potrebbe fare ciò in linea o un metodo di analisi delle cose che consentirebbe a questo di funzionare.

Answer 1

È possibile utilizzare dangerouslySetInnerHTML, ad es.

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

Answer 2

noti che dangerouslySetInnerHTML può essere pericoloso se non si sa che cosa è nella stringa HTML si sta iniettando. Questo perché il codice lato client dannoso può essere iniettato tramite tag di script.

E 'probabilmente una buona idea per disinfettare la stringa HTML tramite un'utilità come DOMPurify se non si è sicuri al 100% il codice HTML che si sta rendering è XSS (cross-site scripting) sicura.

Esempio:

import DOMPurify from 'dompurify' 

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


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

Answer 3

dangerouslySetInnerHTML ha molti svantaggi, perché situato all'interno del tag.

Ti suggerisco di utilizzare un involucro di reazione come ho trovato uno qui su npm per questo scopo. html-react-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 :)

Answer 4

Se qualcun altro atterra ancora qui. Con ES6 è possibile creare il variabile html in questo modo:

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

Answer 5

renderTitle =() => { 
    const title = 'This is my title'; 
    return <h1>{title}</h1> 
} 

render(){ 
    return (
    <div> 
     {this.renderTitle()} 
    </div> 
    ) 
}