修改和重新渲染DOM结构时出现意外行为

Question

I have the following code which is built using react.

<div id="wrapper">
    <form onSubmit={this.handleSubmit}>
        <div id="content">
            .....
        </div>          
    </form>               
</div>

Here, a third party library updates DIV#content on regular basis. However, On submission of the form, I get to wrap the DIV#content with another DIV from my code. Please find the it below after the modification on submission:

<div id="wrapper">
    <form onSubmit={this.handleSubmit}>
        <div id="contentWrapper">
            <div id="content">
                .....
            </div>
        </div>          
    </form>               
</div>

But as soon as the DIV#content is wrapped by another DIV, third party library stops working. Can anyone tell me why it stops updating the DIV#content once the DOM structure is modified despite the fact that the DIV#content element is still available to library.

Note: React is not throwing any error about the DOM structure is changed but just the library stops working.

[Edit]: Here is the way I am rendering using react

render() {
  var returnIt;
  if (useDivOne) returnIt = (<div id='initial'></div>);
  else returnIt = (<div id='modified'></div>);
  return (returnItj);
}

Answer 1

When React is rendering it's not re-using the old DOM element. So your library still has a reference to the old DOM reference and not the new one that react is recreating when it re-renders. Since your library isn't primed for react, you could go about doing this in a sort of round about way, by guaranteeing that the dom element you pass to your library never gets re-created:

componentDidUpdate() {
    // this makes sure yourDiv is ALWAYS visible inside your
    // component
    if(!this.yourDiv.parentNode) {
        this.refs.libContainer.appendChild(this.yourDiv);
    }
}

render() {

    // you will pass a reference to yourDiv to your library and it will
    // refer to that. YourDiv is NEVER re-created so this DOM element
    // lives forever and your library remains happy
    if(!this.yourDiv) {
        this.yourDiv = document.createElement('div');
        this.yourDiv.className = 'specialDiv';
        this.yourDiv.innerHTML = 'hahahaa';
    }
    return <div ref="libContainer"></div>;
    // .... or sometimes return this
    return <div className="wrapper"><div ref="libContainer"></div></div>;
}

And you would pass your library a reference to .specialDiv - note that we're completely stepping over how react renders the DOM here and that this approach is only really viable when fixing a problem where react is interfering with what you're trying to accomplish - so if you implement this I suggest making a new react component as a wrapper around your library so that all the "ugliness" to make the library react friendly can be contained in 1 component.