title: Using JQuery plugins that transform the DOM in React Components?
body: <p>Some JQuery plugins don't just add behavior to DOM nodes, but change them. For example, <a href="http://www.bootstrap-switch.org/">Bootstrap Switch</a> turns</p>
  
  <p><code>&lt;input type="checkbox" name="my-checkbox" checked&gt;</code></p>
  
  <p>into something like</p>
  
  <pre><code>&lt;div class="bootstrap-switch bootstrap-switch-wrapper bootstrap-switch-on bootstrap-switch-large bootstrap-switch-animate"&gt;
    &lt;div class="bootstrap-switch-container"&gt;
      &lt;span class="bootstrap-switch-handle-on bootstrap-switch-primary"&gt;ON&lt;/span&gt;
      &lt;label class="bootstrap-switch-label"&gt;&amp;nbsp;&lt;/label&gt;
      &lt;span class="bootstrap-switch-handle-off bootstrap-switch-default"&gt;OFF&lt;/span&gt;
      &lt;input type="checkbox" name="download-version" checked="" data-size="large" data-on-text="3" data-off-text="2.0.1"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>with</p>
  
  <p><code>$("[name='my-checkbox']").bootstrapSwitch();</code></p>
  
  <p>Which doesn't jive with React:</p>
  
  <pre><code>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 &lt;tbody&gt; when using tables or nesting &lt;p&gt; or
  &lt;a&gt; tags. ...&lt;omitted&gt;...`. 
  </code></pre>
  
  <p>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?</p>