Can a React component manipulate an existing DOM node?

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>;
    }
});

`