HTML mit React Variable Statements (JSX) einfügen

Ich baue etwas mit React, wo ich HTML mit React Variables in JSX einfügen muss. Gibt es eine Möglichkeit, eine Variable wie diese zu haben:

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

und es einzufügen, um so zu reagieren, und hat es funktionieren?

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

und muss es den HTML wie erwartet einfügen? Ich habe nichts über eine Reaktionsfunktion gesehen oder gehört, die dies inline ausführen könnte, oder über eine Methode zum Parsen von Dingen, die dies ermöglichen würden.

Sie können gefährlich SetInnerHTML verwenden , z

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

Beachten Sie, dass dangerouslySetInnerHTMLdies gefährlich sein kann, wenn Sie nicht wissen, was in der HTML-Zeichenfolge enthalten ist, die Sie einfügen. Dies liegt daran, dass bösartiger clientseitiger Code über Skript-Tags eingefügt werden kann.

Es ist wahrscheinlich eine gute Idee, die HTML-Zeichenfolge über ein Dienstprogramm wie DOMPurify zu bereinigen, wenn Sie nicht 100% sicher sind, dass der von Ihnen gerenderte HTML- Code XSS-sicher (Cross-Site Scripting) ist.

Beispiel:

import DOMPurify from 'dompurify'

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


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

gefährlichSetInnerHTML hat viele Nachteile, weil es innerhalb des Tags gesetzt wird.

Ich schlage vor, dass Sie einen React Wrapper verwenden, wie ich ihn hier auf npm für diesen Zweck gefunden habe. Der HTML-React-Parser erledigt den gleichen Job.

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

Sehr einfach :)

Mit verwenden ''Sie es zu String. Verwenden Sie ohne Anführungszeichen funktioniert es gut.

Um Linterfehler zu vermeiden, verwende ich es folgendermaßen:

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

import { Fragment } from 'react' // react version > 16.0

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

Wenn Sie '' verwenden, wird der Wert auf eine Zeichenfolge gesetzt, und React kann nicht erkennen, dass es sich um ein HTML-Element handelt. Sie können Folgendes tun, um React wissen zu lassen, dass es sich um ein HTML-Element handelt:

1. Entfernen Sie die ''und es würde funktionieren
2. Verwenden Sie <Fragment>diese Option , um ein HTML-Element zurückzugeben.

Wenn noch jemand hier landet. Mit ES6 können Sie Ihre HTML-Variable folgendermaßen erstellen:

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

Sie können diesen HTML-Code auch wie folgt in ReactDOM aufnehmen:

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

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

Hier sind zwei Links Link und Link2 aus der React-Dokumentation, die hilfreich sein könnten.