Wie bekomme ich JSX als String?

Ich möchte eine Komponente höherer Ordnung schreiben, sagen wir AddMarkup, die ein einzelnes Kind hat. Es sollte das Kind zusammen mit dem Code darstellen, der es erzeugt. Zum Beispiel:Wie bekomme ich JSX als String?

<AddMarkup> 
    <MyButton color="red"> 
    Red Button 
    </MyButton> 
</AddMarkup>

sollte in etwa wie folgt ergeben:

<div> 
    <button style={{ color: 'red' }}> /* Assume that MyButton is implemented this way */ 
    Red Button 
    </button> 
    <pre> 
    <MyButton color="red"> 
     Red Button 
    </MyButton> 
    </pre> 
</div>

ich mit dem <pre> Bit bin zu kämpfen. Gibt es eine Möglichkeit, das ursprüngliche JSX als String zu verwenden (also könnte ich es in den Tag <pre> setzen)? Gibt es irgendeine Babel- oder Webpack-Magie, die ich anwenden kann?

Quelle

2016-04-26 Misha Moroshko

Das ist eine schwierige Frage! Ich bin mir nicht sicher, ob es eine einfache Lösung gibt, um das Ergebnis eines React-Elements in seine JSX-String-Darstellung umzukehren. Vielleicht könntest du etwas Inspiration auf React dev tools repo finden, um zu sehen, wie sie die jsx in der Konsole anzeigen, vielleicht in der [Node.js] (https://github.com/facebook/react-devtools/blob/master/frontend/ Node.js) -Datei? – Pcriulan

Vielleicht könnte [jsx-to-string] (https://www.npmjs.com/package/jsx-to-string) auf seltsame Weise durch ein Babel-Plugin verbunden werden. Sie müssten eine Konvention definieren ('props.childrenAsString'?) Und Code generieren, der in Babel übereinstimmt, während Sie ihn über ** jsx-to-string ** verarbeiten. Danach wäre dein Code mit einem benutzerdefinierten Babel-Plugin verbunden, was nicht besonders cool ist. –

@bebraw Ja, 'jsx-to-string' ist wahrscheinlich ein guter Anfang. Fühlen Sie sich frei, es als Antwort zu posten;) –

Wahrscheinlich ist der beste Weg, dies zu lösen, ein benutzerdefiniertes Babel-Plugin zu schreiben, das auf jsx-to-string angewiesen ist, um mit der Konvertierung umzugehen. Sie müssen Code schreiben, der den Code als eine Zeichenfolge durch eine vordefinierte Prop (Code-Einstellung) wie childrenAsString injiziert.

Obwohl dies funktionieren würde, würde es auch Ihren Code an Babel binden. Dennoch, wenn Sie es brauchen und Sie sind glücklich mit dem Gotcha, könnte es einen Versuch wert sein.

Quelle

2016-04-27 16:58:31

Antwort

Verwandte Themen