javascript - hello - react js installation

Renderizar cadena HTML como HTML real en un componente React

Question

Esto es lo que probé y cómo sale mal.

Esto funciona:

<div dangerouslySetInnerHTML={{ __html: "<h1>Hi there!</h1>" }} />

Esto no:

<div dangerouslySetInnerHTML={{ __html: this.props.match.description }} />

La propiedad de descripción es solo una cadena normal de contenido HTML. Sin embargo, se representa como una cadena, no como HTML por alguna razón.

¿Alguna sugerencia?

Answer 1

¿ this.props.match.description es una cadena o un objeto? Si es una cadena, debe convertirse a HTML perfectamente. Ejemplo:

class App extends React.Component {

constructor() {
    super();
    this.state = {
      description: ''<h1 style="color:red;">something</h1>''
    }
  }

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.state.description }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById(''root''));

Resultado: http://codepen.io/ilanus/pen/QKgoLA?editors=1011

Sin embargo, si la description: <h1 style="color:red;">something</h1> sin las comillas '''' obtendrá:

​Object {
$$typeof: [object Symbol] {},
  _owner: null,
  key: null,
  props: Object {
    children: "something",
    style: "color:red;"
  },
  ref: null,
  type: "h1"
}

Si es una cadena y no ve ningún marcado HTML, el único problema que veo es un marcado incorrecto.

ACTUALIZAR

Si se trata de títulos HTMLE. Debe decodificarlos antes de enviarlos a dangerouslySetInnerHTML , por eso lo llamaron peligrosamente :)

Ejemplo de trabajo:

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      description: ''<p><strong>Our Opportunity:</strong></p>''
    }
  }

   htmlDecode(input){
    var e = document.createElement(''div'');
    e.innerHTML = input;
    return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
  }

  render() {
    return (
      <div dangerouslySetInnerHTML={{ __html: this.htmlDecode(this.state.description) }} />
    );
  }
}

ReactDOM.render(<App />, document.getElementById(''root''));

Answer 2

Si tiene control sobre el origen de la cadena que contiene html (es decir, en algún lugar de su aplicación), puede beneficiarse de la nueva API <Fragment> , haciendo algo como:

import ReactHtmlParser from ''react-html-parser''; 

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

Answer 3

Si tiene control sobre {this.props.match.description} y está utilizando JSX. Recomendaría no usar "dangerouslySetInnerHTML".

// In JSX, you can define a html object rather than a string to contain raw HTML let description = <h1>Hi there!</h1>; // Here is how you print return ( {description} );

Answer 4

Usé ''react-html-parser''

import React, {Fragment} from ''react''

const stringsSomeWithHtml = {
  testOne: (
    <Fragment>
      Some text <strong>wrapped with strong</strong>
    </Fragment>
  ),
  testTwo: `This is just a plain string, but it''ll print fine too`,
}

...

render() {
  return <div>{stringsSomeWithHtml[prop.key]}</div>
}

yarn add react-html-parser

Fuente en npmjs.com

Answer 5

Verifique si el texto que está intentando agregar al nodo no se escapa así:

var prop = {
    match: {
        description: ''<h1>Hi there!</h1>''
    }
};

En lugar de esto:

var prop = {
    match: {
        description: ''<h1>Hi there!</h1>''
    }
};

si se escapa, debe convertirlo desde el lado del servidor.

El nodo es texto porque se escapó

El nodo es un nodo dom porque no se escapa