Ausführen von Jsx-Transformationen auf dem Client

Question

Ich erstelle eine Anwendung, mit der Benutzer ihre eigenen Komponenten und Vorlagen erstellen und anwenden können. Ich möchte Benutzern erlauben, Strings von jsx-Daten zu bearbeiten und dann die Transformation clientseitig für das Rendern durchzuführen.

Während die in der in browser transform jsx Transformationen auf eingebetteten Skripts ausführt, und react-tools ist auf dem Server verfügbar, kann ich nicht ermitteln, wie die Umwandlungsfunktion für den Client verfügbar gemacht wird.

Die Inline-Browser-Transformation scheint keine Methoden für den Zugriff bereitzustellen, und Atomify/Browserify stürzt ab, wenn ich versuche, die react-tools-Transformation auf dem Client zu verwenden.

Answer 1

Die JSXTransformer Modul exportiert zwei Funktionen:

• transform nimmt JSX Quellcode als String und gibt ein Objekt mit einem Schlüssel mit dem Namen code, dessen Wert ein JavaScript-String, dann eval'd werden kann.

• exec funktioniert wie transform und das Ergebnis wird dann an eval weitergegeben.

Dieser Aufruf:

JSXTransformer.transform("React.createClass({render: function() { return <div></div>; } });").code 

... produziert diese Ebene JavaScript-Ausgabe:

"React.createClass({render: function() { return React.createElement("div", null); } });" 

Answer 2

JSXTransformer war deprecated in mid-2015 zugunsten von Babel in-Browser-Lösung, babel-standalone: https://babeljs.io/docs/setup/#installation

Diskussion hier: https://github.com/facebook/react/issues/5497