Can a React component manipulate an existing DOM node? - reactjs

Question

I'd like to add a bit of functionality to some existing server-rendered HTML. Let's say I have a form:
<form>
<input type="checkbox" /> Show details
<div class='details'>
<input type="text" name="first_name" />
<input type="text" name="last_name" />
</div>
</form>
The HTML is already generated on the server. I'm wondering, can I use a React component to, say, add/remove a hide class to the .details div whenever the checkbox is checked and unchecked?
I don't want React to re-render the form, since the rest of the page is already handled by the server.

Answer 1

There is a solution but I don't know if it is efficient :
You can use the dangerouslySetInnerHTML to create a wrapper over your existing DOM elements.
Consider for example you want to add a swapper on two already existing div elements (https://jsfiddle.net/gdoumenc/a86g58qz/):
// a wrapper just rendering the previous DOM children
var Wrapper = React.createClass({
render: function() {
return <div dangerouslySetInnerHTML={{__html: this.props.html}}/>;
}
});
// a simple swapper
var Swapper = React.createClass({
getInitialState: function() {
return {swap: false};
},
onClick: function() {
this.setState({swap: !this.state.swap});
},
replace: function(id) {
if (!(id in this)) {
var node = document.getElementById(id);
var elt = document.createElement(node.tagName);
elt.appendChild(node.childNodes[0]);
this[id] = elt.innerHTML;
}
return this[id];
},
render: function() {
// replace here the elements par wrapped ones
box1 = <Wrapper html={this.replace('box1')}/>;
box2 = <Wrapper html={this.replace('box2')}/>;
if (this.state.swap) {
content = [box1, box2];
} else {
content = [box2, box1];
};
return <div>
{content}<button onClick={this.onClick}>Swap</button>
</div>;
}
});
`

Answer 2

Check server-rendering React example. You can see there that PHP script is getting React render result from node.js and returns it to client and then the same React component is attached to DOM for further modification.
If you want to have HTML rendered on server side and then handled by React that's the best approach. Otherwise you will need to write templates twice: in React and your server side template engine.