Is there a way to stop react from removing/changing nodes embedded in a react ponent.

For example, I have a react ponent that acts as a container for a non-react ponent that manages its DOM on its own. Is there a way to mark such ponents for reactjs, so that it does not modify its DOM?

In my case, I want my react ponent to be inline-editable by CKeditor, but react always removes/destroys the editor and all the nodes it has added to the DOM, because they were not defined in the react ponent itself and so it thinks that those elements should not be there.

Any ideas?

Is there a way to stop react from removing/changing nodes embedded in a react ponent.

For example, I have a react ponent that acts as a container for a non-react ponent that manages its DOM on its own. Is there a way to mark such ponents for reactjs, so that it does not modify its DOM?

In my case, I want my react ponent to be inline-editable by CKeditor, but react always removes/destroys the editor and all the nodes it has added to the DOM, because they were not defined in the react ponent itself and so it thinks that those elements should not be there.

Any ideas?

• javascript
• dom
• reactjs

2 Answers 2

If you return false from a shouldComponentUpdate method on your ponent, then React will step out of the way and the entire reconciliation process will be skipped for that subtree. Of course, this means that you need to manage all DOM mutations yourself in that area and can't take advantage of React.

Take a look at dangerouslySetInnerHTML on https://facebook.github.io/react/tips/dangerously-set-inner-html.html.

This is the method for adding markup that doesn't sticks to React's update methods and also unsupported tags.

This way you can still update your ponent, while not updating parts of it.