it-swarm.com.de

Einfügen von HTML mit React-Variablenanweisungen (JSX)

Ich baue etwas mit React, wo ich HTML mit React-Variablen 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 in rea zu setzen, und so funktioniert es?

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

und haben sie den HTML-Code wie erwartet eingefügt? Ich habe nichts über eine Reaktionsfunktion gesehen oder gehört, die diese Inline-Funktion ausführen könnte, oder über eine Methode zum Analysieren von Dingen, die dies ermöglichen.

143
Kyle Hotchkiss

Sie können dangerouslySetInnerHTML verwenden, z.

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

Beachten Sie, dass dangerouslySetInnerHTML gefährlich sein kann, wenn Sie nicht wissen, was in der eingefügten HTML-Zeichenfolge enthalten ist. Dies liegt daran, dass schädlicher clientseitiger Code über Skript-Tags eingefügt werden kann.

Es ist wahrscheinlich eine gute Idee, die HTML-Zeichenfolge mithilfe eines Dienstprogramms wie - DOMPurify zu bereinigen, wenn Sie nicht zu 100% sicher sind, dass der 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>
    );
}
68
Yo Wakita

dangerouslySetInnerHTML hat viele Nachteile, da es sich innerhalb des Tags befindet. 

Ich schlage vor, dass Sie zu diesem Zweck einen React-Wrapper verwenden, wie ich ihn hier auf npm gefunden habe html-react-parser .

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 :)

28
user2903536

Um Linterfehler zu vermeiden, verwende ich es so:

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

Mit '' machen Sie es zu einer Zeichenkette. Verwendung ohne Anführungszeichen funktioniert gut. 

2
chauhan amit
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 einen String 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 den '' und es würde funktionieren
  2. Verwenden Sie <Fragment>, um ein HTML-Element zurückzugeben.
1