Render static html client-side

[alfredoreduarte]

Is there any way to get a string of plain html from a react component, but on the client side?

My app has a design editor that lets you click elements and edit their style, nothing new there, but I'm re-making it from the ground up using react-rails both for the app itself and for the templates that should be edited inside an iframe and then rendered elsewhere.

Attaching click handlers to every editable element conditionally (eg: if the view is being rendered inside an iframe, for the editor) would be a nightmare, and I can't just use jquery $('.is-editable').click() like I used to because of the virtual DOM.

Taking all that in account, it seems that the only solution is rendering the would-be-edited view as plain HTML so I can use the $('.is-editable').click() approach inside my editor.

Any insights or similar experiences?

[rmosolgo]

Is there any way to get a string of plain html from a react component, but on the client side?

You can use ReactDOMServer.renderToString or ReactDOMServer.renderToStaticMarkup (https://facebook.github.io/react/docs/top-level-api.html#reactdomserver)

To get the ReactDOMServer object, switch this line:

// remove this:
//= require react 

for this line:

// add this: 
//= require react-server

(this gives you the server bundle).

I use this in my own app for integrating with other JS libraries that expect strings of HTML!

Does that answer your question?

[rmosolgo]

(I'd like to improve that //= require API so you could require the objects one-by-one instead of picking an off-the-shelf bundle)

[michelson]

Hi , i'm trying to include the server bundle but the ReactDOM reference is lost, so ReactUJS fails

any hints? cheers