jquery - FooTable 与 ReactJS (如何从 ReactJS 组件调用 jQuery 插件？)

Question

我正在从主要使用 jQuery 的非 ReactJS 应用程序切换到 ReactJS。

到目前为止，此迁移没有问题，但我的应用程序使用了“FooTable jQuery Plugin”

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

https://jsfiddle.net/yzono/f95o0kdf/1/ <= 这是我创建的示例。

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();
});

我喜欢 FooTable，但它不提供 npm，我不知道如何从 ReactJS 组件调用 jQuery 插件。

有人知道这个吗？我认为使用 Footable 与 ReactJS 一起使用并不理想，但我没有找到任何负责任设计的替代方案。

---

更新1

或许可以找到办法。我会尝试一下。

However, sometimes you simply need to access the underlying API, perhaps to work with a third-party library like a jQuery plugin. React provides escape hatches for you to use the underlying DOM API directly.

Does react.js play nice with jQuery/UI components

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

Answer 1

它有效。这篇文章救了我。

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

我使用了 refs 和 componentDidUpdate()。

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

<table ref="sampletable">