Injizieren JSX-formatierten string zu Reagieren Komponente

Ich habe ein kleines reagieren Seite, sollte kompilieren und die Anzeige von html-string.
den html-Code in den string geschrieben reagieren-Stiftung

Sieht die Seite so aus :

import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { Link, Button, Colors } from 'react-foundation';
require('./foundation.css')

var htmlFromApi = '<div className="button-basics-example"><Button color={Colors.SUCCESS}>Save</Button><Button color={Colors.ALERT}>Delete</Button></div>';

var App = ({ html }) => { return <div>{html}</div> }

ReactDOM.render(
<App html={htmlFromApi}/>,
document.getElementById('react')
);

Das Ergebnis des obigen Codes ist nur ein string, Frage ich mich, ob es einen Weg gibt, der zum konvertieren der html-string zu reagieren element

etwas wie dieses :

var reactElement= toReactElement(htmlFromApi);
//the result is <div className="button-basics-example"><Button color={Colors.SUCCESS}>Save</Button><Button color={Colors.ALERT}>Delete</Button></div>

PS ich habe versucht <div className="content" dangerouslySetInnerHTML={{ __html: htmlFromApi }}></div> und hat nicht funktioniert

Vielen Dank im Voraus

Edit: der code ist hier

  • Versuchen Sie es mit dangerouslySetInnerHTML – facebook.github.io/reagieren/docs/…
  • Wie über Reagieren.createElement(elementString, propsObject) ?
  • hat nicht funktioniert, bcz dangerouslySetInnerHTML erwarten kompilierte html-string, aber der string den ich habe, ist nicht kompiliert
  • Ich kann Reagieren.createElement bcz ich weiß nicht, wie der string Aussehen wird, und es ist sehr lange Zeichenfolge mit so vielen verschachtelten Komponenten
InformationsquelleAutor Rana | 2017-08-22



One Reply
  1. 3

    Ich ursprünglich eine Antwort auf die Frage, wie können Sie eine Zeichenfolge einfügen als HTML-Code direkt zu Reagieren. Jedoch, da Sie wollen auch Variablen innerhalb von Strings werden geparst (und andere potenzielle Logik), bevor es eingefügt wird in Reagieren, ich habe beide Optionen hier, wie Sie nützlich sein könnte für zukünftige Leser.


    Fall 1 – Ihr string ist bereit eingefügt zu werden

    Wenn der string mit Ihrer HTML ist bereit, um direkt eingesetzt zu Reagieren, und nicht code enthalten, muss analysiert werden, zunächst sollten Sie verwenden dangerouslySetInnerHTML. Sie sollten es auf der Verpackung div enthält die HTML holte aus Ihrer API.

    Siehe Beispiel unten.

    JS:

    var htmlFromApi = '<div className="button-basics-example"><Button color={Colors.SUCCESS}>Save</Button><Button color={Colors.ALERT}>Delete</Button></div>';
    
    var App = ({html}) => { return <div dangerouslySetInnerHTML={{ __html: html}}></div> }
    
    ReactDOM.render(<App html={htmlFromApi}/>, document.getElementById('app'));

    HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
    <div id="app"></div>


    Fall 2 – Dein string ist nicht fertig und benötigt zusätzliche Logik vor dem Einbau

    Wenn Ihr string ist nicht „fertig“, um die injiziert werden direkt in den DOM, sondern muss auf irgendeine Art von Verarbeitung erste (e.g Ihre string-Variablen enthält, die interpretiert werden müssen, zuerst), werden die Dinge komplizierter. Leider gibt es keine guten noch die „empfohlene“ Weg, dies zu tun.

    • Wenn die manipulation, die erforderlich ist einfach und relativ statisch, Sie könnte vielleicht die Verwendung von regex. Obwohl dieser Ansatz kommt mit Einschränkungen. Anwendungsfälle für diesen Ansatz könnte sein, manipulieren eines DOM-Klasse oder ein element hinzufügen, um die Zeichenkette.
    • Ein weiterer Ansatz ist die Verwendung einer Bibliothek, wie html-zu-reagieren, könnte helfen, dass Sie mit dem, was Sie suchen.
    • Schließlich, wenn Sie mit Babel (die Sie fast sicher sind), können Sie mit der Babel-Transformator. Alles, was Sie brauchen, ist zu importieren babel-core in Ihren code und wandelt die Zeichenfolge in JSX. Dieser Ansatz möglicherweise mehr eingeschränkt, als die Verwendung einer Bibliothek, aber es sollte ausreichen.

    Hier ist, wie zu implementieren Punkt #3 von oben:

    Babel.transform(code, options);

    Wo code ist Ihr html-string. In options müssen wir ein Objekt übergeben, mit {presets: ['react']} so, dass Babel versteht, dass wollen JSX als unsere Ausgabe. Natürlich könnten Sie fügen Sie andere Optionen, auch hier.

    Diese gibt ein Objekt zurück, das enthält Zeugs, wie die Quelle-Karte, aber wir sind nur daran interessiert, den generierten code hier. So müssen wir hinzufügen:

    Babel.transform(code, options).code;

    Beachten Sie, dass code javascript-code in einem string-format ist, und es drückt einen Funktionsaufruf zu erstellen, Reagieren Element mit React.createElement. Zum ausführen einer Zeichenfolge als code in javascript können wir eval().

    Können wir fügen Sie dann diese Reagieren Element in unsere Reagieren Komponente und render es in der Regel, wie im Beispiel unten gezeigt.


    JS:

    var htmlFromApi = '<div className="button-basics-example"><Button color={Colors.SUCCESS}>Save</Button><Button color={Colors.ALERT}>Delete</Button></div>';
    var Colors = {SUCCESS: "green", ALERT: "red"};
    
    var App = ({html}) => {
      var Component = Babel.transform(htmlFromApi, {presets: ["react"]}).code;
      return <div>{eval(Component)}</div>;
    };
    
    var Button = ({color, children}) => (
      <button style={{backgroundColor: color}}>{children}</button>
    );
    
    ReactDOM.render(<App />, document.getElementById("app"));

    HTML:

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
    <div id="app"></div>

    Weitere details über Babel.transform finden Sie in der offizielle Dokumentation.

    • vielen Dank für deine Antwort, aber auf diese Weise die Werte in der Zeichenfolge wird nicht bewertet oder kompiliert , bin ich im Recht , tut mir Leid ich bin sehr schlecht reagieren
    • dies ist, wie das Ergebnis aussieht mit css statt codepen.io/anon/pen/oeddYN?Redakteure=1111
    • Nur eine kurze Anmerkung, aber ich glaube, Sie wollen nicht zu zählen className in den äußeren div, da es nicht korrekt ausgegeben. Es endet mit einem Attribut classname=“button-Grundlagen-Beispiel“ im browser. Sie verwenden nur das Wort Klasse festlegen und dann einige styling-für Taster-basic-Beispiel in der css im inneren des Stiftes, ich war in der Lage zu produzieren styling, aber nicht, wenn es verwendet className innerhalb der html-string. Irgendwelche Gedanken auf, dass?
    • dangerouslySetInnerHTML erwarten kompilierte html, so gibt es keinen Weg, um es zu kompilieren Zeichenfolge, die Komponenten im inneren wie< /Button>, und die Zeichenfolge, die ich habe, ist die nicht kompilierte html , also brauche ich einen Weg, der zum kompilieren der html übergeben dangerouslySetInnerHTML
    • Ich aktualisiert meine Antwort. Bitte haben Sie einen Blick.
    • Ich habe gerade den Punkt erreicht, u erwähnt im Kommentar, aber nicht machen konnte Babel Arbeit in meine Seite ? es dies der Weg, den wir importieren ( import * als babel von ‚babel-core“) , beachten Sie, dass ich diese version haben („babel-core“: „^6.26.0“,) und ich bin mit „webpack“: „^3.5.0“,
    • ich Stand vor diesem problem mit babel github.com/babel/babel/issues/2961
    • welche Fehler haben Sie?
    • warum u definiert eine Taste und Farben comonents? wenn u entfernen Sie Sie und fügen Sie import { Link, Button, Farben,} aus ‚reagieren-Stiftung‘; dann die oben Taube wird nicht funktionieren, der string enthält viel mehr als die Tasten , es werden fast alle Komponenten reagieren-Stiftung, machen u eine Idee haben, wie können wir es schaffen mit reagieren-Stiftung?
    • der Fehler ist : nach der Verwendung von description-Datei: C:\Test\X\Scripts\Z\node_modules\babel-core\package.json (relativer Pfad: ./lib/Helfer) zu lösen, wie-Modul C:\Test\X\Scripts\Z\node_modules\babel-core\lib\helpers\node_modules existiert nicht oder ist kein Verzeichnis C:\Test\X\Scripts\Z\node_modules\babel-core\lib\node_modules existiert nicht oder ist kein Verzeichnis C:\Test\X\Scripts\Z\node_modules\babel-core\node_modules existiert nicht oder ist kein Verzeichnis C:\Test\X\Scripts\Z\node_modules\node_modules existiert nicht oder ist kein Verzeichnis
    • babel-core hat bei mir nicht funktioniert, aber babel-standalone geklappt hat, aber ich hatte definieren Sie die Komponenten, die ich verwenden in der htmlString in der gleichen Datei, nicht annehmen“, import {Taste} aus ‚reagieren-Stiftung“‚
    • Hey @Chris, ich versuche es zu implementieren Sie Ihre Lösung, aber ich habe problem beim importieren von babel-core in meine Reagieren Komponente. Wepack sagt, er kann nicht zu beheben babel-core-Modul. Irgendwelche Tipps dazu? Danke!!!
    • nun, zunächst einmal ich hoch vorschlagen, gehen mit der 1. option, die ich bereitgestellt, wenn möglich. Wenn Sie immer noch wollen, um zu gehen mit der option (2): Hast du npm install babel-core? (oder Garn, wenn Sie diese verwenden)
    • In meinem Fall brauche ich eine volle jsx Ausdruck in einer Zeichenfolge gespeichert werden und dann ausgewertet jsx, einschließlich der Objekte/Variablen und Bedingungen. ie: <span className={item.active ? "active" : ""}>{item.name}<span>. Also ja, ich habe installiert und importiert babel-core, das ist, wenn der Fehler Auftritt. Wenn Sie auch keine andere Lösung für mein Szenario, lassen Sie es mich bitte wissen! Tks!

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.