Some JQuery plugins don't just add behavior to DOM nodes, but change them. For example, Bootstrap Switch turns
<input type=checkbox name=my-checkbox checked>
into something like
<div class=bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-large bootstrap-switch-animate>
<div class=bootstrap-switch-container>
<span class=bootstrap-switch-handle-on bootstrap-switch-primary>ON</span>
<label class=bootstrap-switch-label> </label>
<span class=bootstrap-switch-handle-off bootstrap-switch-default>OFF</span>
<input type=checkbox name=download-version checked= data-size=large data-on-text=3 data-off-text=2.0.1>
</div>
</div>
with
$([name='my-checkbox']).bootstrapSwitch();
Which doesn't jive with React:
Uncaught Error: Invariant Violation: findComponentRoot(..., .0): Unable to find
element. This probably means the DOM was unexpectedly mutated (e.g., by the
browser), usually due to forgetting a <tbody> when using tables or nesting <p> or
<a> tags. ...<omitted>...`.
Is there a recommended technique for incorporating these plugins into React components? Or do they fundamentally break the assumptions of React and cannot work with it?