Esecuzione di trasformazioni jsx sul client

Question

Sto costruendo un'applicazione che consente agli utenti di creare e applicare i propri componenti e modelli. Voglio consentire agli utenti di modificare stringhe di dati jsx e quindi eseguire la trasformazione lato client per il rendering.

Mentre il parametro in browser transform esegue trasformazioni jsx su script incorporati e react-tools è disponibile sul server, non è possibile determinare come rendere disponibile la funzione di trasformazione al client.

La trasformazione del browser in linea non sembra fornire alcun metodo per l'accesso e Atomify/Browserify si arresta in modo anomalo quando si tenta di utilizzare la trasformazione react-tools sul client.

Answer 1

esportazioni modulo JSXTransformer due funzioni:

• transform prende JSX codice sorgente come una stringa e restituisce un oggetto con una chiave denominata code il cui valore è una stringa JavaScript che possono poi essere eval'd.

• exec funziona come transform e il risultato viene quindi passato a eval.

Questa chiamata:

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

... produce questa pianura JavaScript uscita:

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

Answer 2

JSXTransformer era deprecated in mid-2015 a favore della soluzione di Babel in-browser, babel-standalone: https://babeljs.io/docs/setup/#installation

Discussione qui: https://github.com/facebook/react/issues/5497