Wie rendert man HTML-String als echtes HTML?

Question 1

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

Das funktioniert:

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

Dies nicht:

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

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

Irgendwelche Vorschläge?

Question 2

Ist this.props.match.description eine Zeichenfolge oder ein Objekt? Wenn es sich um eine Zeichenfolge handelt, sollte sie 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

Allerdings wenn Beschreibung ist <h1 style="color:red;">something</h1> ohne die Anführungszeichen ''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 mit HTML-Entitäten zu tun haben, müssen Sie sie decodieren, bevor Sie sie an senden dangerouslySetInnerHTML deshalb heißt es “gefährlich” 🙂

Arbeitsbeispiel:

class App extends React.Component {

  constructor() {
    super();
    this.state = {
      description: '&lt;p&gt;&lt;strong&gt;Our Opportunity:&lt;/strong&gt;&lt;/p&gt;'
    }
  }

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

Question 3

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

Hervorheben des Kommentars von @okram für mehr Sichtbarkeit:

aus der Github-Beschreibung: Konvertiert HTML-Strings direkt in React-Komponenten, wodurch die Verwendung von DangerlySetInnerHTML von npmjs.com vermieden wird. Ein Dienstprogramm zum Konvertieren von HTML-Strings in React-Komponenten. Vermeidet die Verwendung von DangerlySetInnerHTML und konvertiert Standard-HTML-Elemente, -Attribute und -Inline-Stile in ihre React-Äquivalente.

Question 4

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

var prop = {
    match: {
        description: '&lt;h1&gt;Hi there!&lt;/h1&gt;'
    }
};

An Stelle von:

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

Wenn Escapezeichen vorhanden sind, sollten Sie es von Ihrer Serverseite konvertieren.

Der Knoten ist Text, weil er maskiert ist

Der Knoten ist ein Dom-Knoten, weil er nicht maskiert ist

Question 5

Wenn Sie HTML in einer Zeichenfolge haben, würde ich die Verwendung eines Pakets mit dem Namen empfehlen html-react-parser.

Installation

NPM:

npm install html-react-parser

Garn:

yarn add html-react-parser

Verwendungszweck

import parse from 'html-react-parser'
const yourHtmlString = '<h1>Hello</h1>'

Code:

<div>
    {parse(yourHtmlString)}
</div>

Question 6

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

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

Question 7

Ich verwende innerHTML zusammen mit einer Referenz, 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>
}

AKTUALISIEREN:

Ich habe einige HTML-Zustände entfernt und Kommentare hinzugefügt, um das Beispiel besser auf das Konzept abzustimmen.

/**
 * example how to retrieve a reference to an html object
 */

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

/**
 * this component can be used into another for example <Sample/>
 */
export default function Sample() {
    /**
     * 1) spanRef is now a React.RefObject<HTMLSpanElement>
     * initially created with null value
     */
    const spanRef = useRef<HTMLSpanElement>(null);

    /**
     * 2) later, when spanRef changes because html span element with ref attribute,
     * follow useEffect hook will triggered because of dependent [spanRef].
     * in an if ( spanRef.current ) that states if spanRef assigned to valid html obj
     * we do what we need : in this case through current.innerHTML
     */
    useEffect(() => {
        if (spanRef.current) {
            spanRef.current.innerHTML = "some <b>bold</b>";
        }
    }, [spanRef]);

    return <div>
        my custom text follows<br />
        {/* ref={spanRef] will update the React.RefObject `spanRef` when html obj ready */}
        <span ref={spanRef} />
    </div>
}

Question 8

Sie verwenden einfach die DangerlySetInnerHTML-Methode von React

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

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