Einfügen von HTML mit Reagieren Variable Aussagen (JSX)

Baue ich etwas mit Reagieren, wo ich das einfügen muss HTML mit Variablen Reagieren in JSX. Gibt es eine Möglichkeit die variable in etwa so:

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

und stecken Sie es in reagieren, wie so -, und haben Sie Arbeit?

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

haben und Sie es einfügen, die HTML als erwartet? Ich habe nicht gesehen oder gehört nichts über eine Funktion reagieren, könnte dies inline, oder eine Methode der Analyse die Dinge, die erlauben würde, diese zu arbeiten.

InformationsquelleAutor Kyle Hotchkiss | 2014-05-12

  1. 234

    Können Sie dangerouslySetInnerHTML, z.B.

    render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}
    Wie funktioniert das, wenn Sie brauchen, um etwas hinzuzufügen, um <head>?
    Normalen DOM-Methoden in componentDidMount sollte funktionieren, ich habe es nicht getan, bevor, wenn.
    Sind Sie versuchen, einfügen von bedingten IE Kommentare in <head>? Wenn dem so ist, hatte ich Erfolg mit dem trick hier beschrieben: nemisj.com/conditional-ie-comments-in-react-js
    Ich versuche, fügen Sie ein beacon-header zur Verfügung gestellt von New Relic.
    Stellen Sie sicher, Sie passieren Sie eine Methode, um die dangerouslySetInnerHTML und kein hash. Laut der docs, es ist gefährlich, übergeben Sie einfach einen hash. Verweis: facebook.github.io/react/tips/dangerously-set-inner-html.html

    InformationsquelleAutor Douglas

  2. 78

    Beachten Sie, dass dangerouslySetInnerHTML kann gefährlich sein, wenn Sie nicht wissen, was ist in der HTML-string, den Sie injiziert werden. Dies ist, weil böswillige client-side code injiziert werden kann über script-tags.

    Ist es wahrscheinlich eine gute Idee zur Bereinigung von HTML-string über ein Dienstprogramm wie DOMPurify wenn Sie nicht 100% sicher, dass der HTML, die Sie Rendern ist XSS (cross-site-scripting) sicher.

    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>
    );
}
    NÖ sollte es nicht 🙂

    InformationsquelleAutor Yo Wakita

  3. 35

    dangerouslySetInnerHTML hat viele Nachteil, weil es in den tag.

    Ich schlage vor, Sie verwenden einige reagieren wrapper, wie ich hier auf npm für diesen Zweck.
    html-reagieren-parser macht die gleiche Arbeit.

    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 🙂

    "dangerouslySetInnerHTML hat viele Nachteil, weil es in der tag." Können Sie erklären, mehr über dieses. Versuchen zu denken, aus welchen fundamentalen Unterschied gibt es zwischen html-reagieren-parser und sanatized innerHtml

    InformationsquelleAutor user2903536

  4. 7

    Mithilfe '' Sie machen es zu einem string. Die Verwendung ohne Anführungszeichen, es wird funktionieren.

    Zuerst habe ich gelacht und dann gab es eine chance, die mich umhauen
    Bei weitem die einfachste Antwort, vor allem, wenn der HTML-Code, den du geschrieben hast und dynamisch basierend auf Benutzereingaben. Sie können buchstäblich set var myHtml = <p>text</p>; und es funktioniert

    InformationsquelleAutor chauhan amit

  5. 2

    Zu vermeiden, linter Fehler, ich benutze es so:

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

    InformationsquelleAutor Tudor Morar

  6. 2
    import { Fragment } from 'react' //react version > 16.0

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

    Durch die Verwendung von " das setzt den Wert in einen string zu Reagieren und hat keine Möglichkeit zu wissen, dass es ein HTML-element. Sie können Folgendes tun zu lassen, zu Reagieren weiß, es ist ein HTML-element -

    1. Entfernen Sie die '' und es würde funktionieren
    2. Verwenden <Fragment> für die Rückgabe einer HTML-element.
    Es wäre gut, fügen Sie eine kurze Erklärung zu deinem code
    Dies beantwortet die Frage nicht. Der Inhalt thisIsMyCopy selbst JSX, nicht einen HTML-string an. Sie sind also buchstäblich einfügen JSX in JSX.

    InformationsquelleAutor Amandeep Singh Ghai

  7. -3

    Wenn jemand sonst noch landet hier. Mit ES6 Sie können erstellen Sie Ihre html-Variablen etwa so: 

    render(){
    var thisIsMyCopy = (
        <p>copy copy copy <strong>strong copy</strong></p>
    );
    return(
        <div>
            {thisIsMyCopy}
        </div>
    )
}
    und wenn Sie möchten, dass Variablen innerhalb einer Zeichenfolge, müssen Sie wickeln Sie jeden in {} und die gesamte Zeichenfolge in einigen markup wie so (<span>{telephoneNumber} <br /> {email}</span>)
    Dies ist Verschieden von dem, was ist gefragt in der Frage. In der Frage <p>copy copy copy <strong>strong copy</strong></p> ist ein string. Sie haben es als JSX.
    Das ist nicht ES6, aber JSX

    InformationsquelleAutor Harry

  8. -3

    Können Sie auch diesen HTML-Code in ReactDOM wie diese:

    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 Reagieren-Dokumentation, die hilfreich sein könnten.

    InformationsquelleAutor GrassLand

Schreibe einen Kommentar