Rendering della stringa HTML come HTML reale in un componente React

Ecco cosa ho provato e come va storto.

Questo funziona:

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

Questo non:

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

La proprietà description è solo una normale stringa di contenuto HTML. Tuttavia è reso come una stringa, non come HTML per qualche motivo.

Eventuali suggerimenti?

Controlla se il testo che stai tentando di aggiungere al nodo non è sfuggito in questo modo:

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

Invece di questo:

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

se è scappato dovresti convertirlo dal tuo lato server.

Il nodo è testo perché è sfuggito

Il nodo è un nodo dom perché non è sottoposto a escape

Non this.props.match.descriptionè una stringa o un oggetto? Se è una stringa, dovrebbe essere convertita in HTML bene. Esempio:

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

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

Tuttavia se description: <h1 style="color:red;">something</h1>senza le virgolette ''otterrai:

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

Se è una stringa e non vedi alcun markup HTML, l'unico problema che vedo è il markup sbagliato.

AGGIORNARE

Se hai a che fare con HTMLEntitles. Devi decodificarli prima di inviarli a dangerouslySetInnerHTMLquesto è il motivo per cui lo hanno chiamato pericolosamente :)

Esempio funzionante:

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

Uso 'reagire-html-parser'

yarn add react-html-parser

import ReactHtmlParser from 'react-html-parser'; 

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

fonte su npmjs.com

Alzando il commento di @ okram per una maggiore visibilità:

dalla sua descrizione github: converte le stringhe HTML direttamente in componenti React evitando la necessità di usare pericolosamenteSetInnerHTML da npmjs.com Un'utilità per convertire stringhe HTML in componenti React. Evita l'uso di dangerouslySetInnerHTML e converte elementi HTML standard, attributi e stili incorporati nei loro equivalenti React.

Se hai il controllo da dove proviene la stringa contenente html (ad es. Da qualche parte nella tua app), puoi beneficiare della nuova <Fragment>API, facendo qualcosa del tipo:

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

Basta usare il metodo pericolosamenteSetInnerHTML di React

<div dangerouslySetInnerHTML={{ __html: htmlString }} />

Oppure puoi implementare di più in questo modo semplice: esegui il rendering del codice HTML non elaborato nell'app React

dangerouslySetInnerHTML

dangerouslySetInnerHTML è il sostituto di React per l'utilizzo di innerHTML nel DOM del browser. In generale, impostare HTML dal codice è rischioso perché è facile esporre inavvertitamente gli utenti a un attacco di cross-site scripting (XSS). Quindi, puoi impostare HTML direttamente da React, ma devi digitare pericolosamenteSetInnerHTML e passare un oggetto con una chiave __html, per ricordare a te stesso che è pericoloso. Per esempio:

function createMarkup() {
  return {__html: 'First · Second'};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

Uso innerHTML insieme come riferimento per comprendere:

import React, { useRef, useEffect, useState } from 'react';

export default function Sample() {
  const spanRef = useRef<HTMLSpanElement>(null);
  const [someHTML,] = useState("some <b>bold</b>");

  useEffect(() => {
    if (spanRef.current) {
      spanRef.current.innerHTML = someHTML;
    }
  }, [spanRef.current, someHTML]);

  return <div>
    my custom text follows<br />
    <span ref={spanRef} />
  </div>
}

Nel mio caso, ho usato reagire-render-html

Prima installa il pacchetto entro npm i --save react-render-html

poi,

import renderHTML from 'react-render-html';

renderHTML("<a class='github' href='https://github.com'><b>GitHub</b></a>")

Non ho potuto npm buildlavorare con react-html-parser. Tuttavia, nel mio caso, sono stato in grado di utilizzare correttamente https://reactjs.org/docs/fragments.html . Avevo l'obbligo di mostrare pochi caratteri HTML unicode, ma non dovevano essere direttamente incorporati in JSX. All'interno di JSX, doveva essere prelevato dallo stato del componente. Lo snippet di codice componente è riportato di seguito:

constructor() 
{
this.state = {
      rankMap : {"5" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9733;</Fragment> , 
                 "4" : <Fragment>&#9733; &#9733; &#9733; &#9733; &#9734;</Fragment>, 
                 "3" : <Fragment>&#9733; &#9733; &#9733; &#9734; &#9734;</Fragment> , 
                 "2" : <Fragment>&#9733; &#9733; &#9734; &#9734; &#9734;</Fragment>, 
                 "1" : <Fragment>&#9733; &#9734; &#9734; &#9734; &#9734;</Fragment>}
                };
}

render() 
{
       return (<div class="card-footer">
                    <small class="text-muted">{ this.state.rankMap["5"] }</small>
               </div>);
}

io uso https://www.npmjs.com/package/html-to-react

const HtmlToReactParser = require('html-to-react').Parser;
let htmlInput = html.template;
let htmlToReactParser = new HtmlToReactParser();
let reactElement = htmlToReactParser.parse(htmlInput); 
return(<div>{reactElement}</div>)

Se hai il controllo su {this.props.match.description} e se stai utilizzando JSX. Consiglierei di non usare "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}
);