FooTable mit ReactJS (Wie kann ich jQuery-Plugin von ReactJS-Komponente aufrufen?)

Question

Ich bin von Non-ReactJS-Anwendung, die meist jQuery verwendet, zu ReactJS wechseln.

Diese Migration ist kein Problem, so weit, aber meine Anwendung wurde verwendet, "FooTable jQuery Plugin"

http://fooplugins.github.io/FooTable/index.html

https://jsfiddle.net/yzono/f95o0kdf/1/ < = Dies ist ein Beispiel I erstellt.

HTML

<table class="footable"> 
    <thead> 
    <tr> 
     <th data-class="expand">Name</th> 
     <th data-hide="phone,tablet">Phone</th> 
     <th data-hide="phone">Zip</th> 
     <th data-hide="phone">Address</th> 
    </tr> 
    </thead> 

    <tbody> 
    <tr> 
     <td>Ken</td> 
     <td>00-1234-5678</td> 
     <td>110-0006</td> 
     <td>Tokyo</td> 
    </tr> 
    <tr> 
     <td>Hanako</td> 
     <td>11-2345-6789</td> 
     <td>550-0026</td> 
     <td>Osaka</td> 
    </tr> 
    <tr> 
     <td>Ichiro</td> 
     <td>22-3456-7890</td> 
     <td>812-0002</td> 
     <td>Fukuoka</td> 
    </tr> 
    <tr> 
     <td>Sato</td> 
     <td>22-3456-7890</td> 
     <td>468-0836</td> 
     <td>Aichi</td> 
    </tr> 
    </tbody> 
</table> 

JS

$(function() { 
    $('table').footable(); 
}); 

Ich mag FooTable aber nicht npm bieten und ich bin nicht sicher, wie kann ich jQuery-Plugin von ReactJS Komponente aufrufen.

Weiß jemand darüber? Ich denke, dass die Verwendung von Footable mit ReactJS nicht ideal ist, aber ich habe keine Alternativen für verantwortungsvolles Design gefunden.

---

Update 1

Es kann möglich sein, einen Weg zu finden. Ich werde es versuchen.

Manchmal müssen Sie jedoch nur auf die zugrunde liegende API zugreifen, vielleicht um mit einer Bibliothek eines Drittanbieters wie einem jQuery-Plugin zu arbeiten. React stellt Escape-Schraffuren bereit, damit Sie die zugrunde liegende DOM-API direkt verwenden können.

Does react.js play nice with jQuery/UI components

http://facebook.github.io/react/docs/working-with-the-browser.html

Answer 1

Es funktioniert. Dieser Artikel hat mich gerettet.

https://taylorlovett.com/2015/08/05/modifying-the-dom-with-jquery-within-react-components-in-isomorphic-applications/

I verwendet refs und componentDidUpdate().

componentDidUpdate: function(prevProps, prevState) { 
    jQuery(ReactDOM.findDOMNode(this.refs.sampletable)).footable(); 
}, 

<table ref="sampletable">