Rendern Sie eine HTML-Zeichenfolge als echtes HTML in einer React-Komponente

Hier ist, was ich versucht habe und wie es schief geht.

Das funktioniert:

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

Das geht nicht:

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

Die Beschreibungseigenschaft ist nur eine normale Zeichenfolge von HTML-Inhalten. Es wird jedoch als Zeichenfolge gerendert, aus irgendeinem Grund nicht als HTML.

Irgendwelche Vorschläge?

Überprüfen Sie, ob der Text, den Sie an den Knoten anhängen möchten, nicht wie folgt maskiert wird:

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

An Stelle von:

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

Wenn es maskiert ist, sollten Sie es von Ihrer Serverseite konvertieren.

Der Knoten ist Text, weil er maskiert ist

Der Knoten ist ein Dom-Knoten, da er nicht maskiert wird

Enthält this.props.match.descriptionIst ein String oder ein Objekt? Wenn es sich um eine Zeichenfolge handelt, sollte diese problemlos in HTML konvertiert werden. Beispiel:

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

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

Wenn Sie jedoch description: <h1 style="color:red;">something</h1>keine Anführungszeichen ''haben, erhalten Sie:

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

Wenn es sich um eine Zeichenfolge handelt und Sie kein HTML-Markup sehen, ist das einzige Problem, das ich sehe, ein falsches Markup.

AKTUALISIEREN

Wenn Sie es mit HTMLEntitles zu tun haben. Sie müssen sie entschlüsseln, bevor Sie sie an senden dangerouslySetInnerHTML, deshalb haben sie es gefährlich genannt :)

Arbeitsbeispiel:

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

Ich benutze 'react-html-parser'

yarn add react-html-parser

import ReactHtmlParser from 'react-html-parser'; 

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

Quelle auf npmjs.com

Erhöhen Sie den Kommentar von @ okram für mehr Sichtbarkeit:

Aus der Github-Beschreibung: Konvertiert HTML-Zeichenfolgen direkt in React-Komponenten, ohne dass die gefährliche Verwendung von SetInnerHTML von npmjs.com erforderlich ist. Ein Dienstprogramm zum Konvertieren von HTML-Zeichenfolgen in React-Komponenten. Vermeidet die Verwendung von gefährlichSetInnerHTML und konvertiert Standard-HTML-Elemente, -Attribute und -Inline-Stile in ihre React-Entsprechungen.

Wenn Sie die Kontrolle darüber haben, woher die HTML-Zeichenfolge stammt (dh irgendwo in Ihrer App), können Sie von der neuen <Fragment>API profitieren und Folgendes tun:

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

Sie verwenden nur die gefährlich-SetInnerHTML-Methode von React

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

Oder Sie können auf einfache Weise mehr implementieren: Rendern Sie den HTML-Code in der React-App

gefährlichSetInnerHTML

gefährlichSetInnerHTML ist Reacts Ersatz für die Verwendung von innerHTML im Browser-DOM. Im Allgemeinen ist das Festlegen von HTML aus Code riskant, da es leicht ist, Ihre Benutzer versehentlich einem XSS-Angriff (Cross-Site Scripting) auszusetzen. Sie können HTML also direkt in React festlegen, müssen jedoch gefährlich SetInnerHTML eingeben und ein Objekt mit einem __html-Schlüssel übergeben, um sich daran zu erinnern, dass es gefährlich ist. Beispielsweise:

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

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

Ich benutze innerHTML zusammen, um Folgendes zu überspannen:

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

In meinem Fall habe ich react-render-html verwendet

Installieren Sie zuerst das Paket von npm i --save react-render-html

dann,

import renderHTML from 'react-render-html';

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

Ich konnte nicht damit npm buildarbeiten react-html-parser. In meinem Fall konnte ich jedoch https://reactjs.org/docs/fragments.html erfolgreich nutzen . Ich musste einige HTML-Unicode-Zeichen anzeigen, aber sie sollten nicht direkt in JSX eingebettet sein. Innerhalb der JSX musste es aus dem Status der Komponente ausgewählt werden. Das Komponentencode-Snippet ist unten angegeben:

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

Ich benutze 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>)

Wenn Sie die Kontrolle über die {this.props.match.description} haben und JSX verwenden. Ich würde empfehlen, "gefährlichSetInnerHTML" nicht zu verwenden.

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