javascript - script - react helmet ssr

Insertar HTML con declaraciones reactivas de variables(JSX)

Question

Estoy creando algo con React donde necesito insertar HTML con React Variables en JSX. ¿Hay alguna forma de tener una variable como esta?

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

y para insertarlo en reaccionar así, y hacer que funcione?

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

y que inserte el HTML como se esperaba? No he visto o escuchado nada sobre una función de reacción que pueda hacer esto en línea, o un método de analizar cosas que permitan que esto funcione.

Answer 1

Al usar '''' estás haciendo una cadena. Usar sin comillas invertidas funcionará bien.

Answer 2

Para evitar errores de linter, lo uso así:

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

Answer 3

Puede usar dangerouslySetInnerHTML , por ejemplo

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

Answer 4

Si alguien más todavía aterriza aquí. Con ES6 puedes crear tu variable html de la siguiente manera:

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

Answer 5

También puede incluir este HTML en ReactDOM de esta manera:

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

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

Aquí hay dos enlaces de link y link2 de la documentación de React que podrían ser útiles.

Answer 6

dangerouslySetInnerHTML tiene muchas desventajas porque se establece dentro de la etiqueta.

Te sugiero que uses un contenedor de reacciones como el que encontré aquí en npm para este propósito. html-react-parser hace el mismo trabajo.

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>
    );
}

Muy simple :)

Answer 7

Tenga en cuenta que dangerouslySetInnerHTML puede ser peligroso si no sabe qué hay en la cadena HTML que está inyectando. Esto se debe a que el código del lado del cliente malicioso se puede inyectar mediante etiquetas de script.

Probablemente sea una buena idea desinfectar la cadena HTML a través de una utilidad como DOMPurify si no está seguro al 100% de que el HTML que está representando es XSS (scripts de sitios cruzados) seguro.

Ejemplo:

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>
    );
}