我使用 DataTables 和jquery-resizable-columns创建具有可调整大小列的表。这是示例。

我尝试在带有 DataTables 的基本 ReactJS 应用程序中使用 jquery-resizable-columns 插件。我在componentDidMount中添加了resizableColumns函数，但它不起作用。

我在 ReactJS，有人可以向我解释为什么它不起作用吗？

jsfiddle

jsx脚本

/** @jsx React.DOM */

var TodoApp = React.createClass({
  getInitialState: function() {
    return {items: [], text: ''};
  },
  render: function() {
    return (
      <div>
        <h3>React + jQuery.DataTable</h3>

        <LopMonHoc />
      </div>
    );
  }
});

var LopMonHoc = React.createClass({
    getInitialState: function(){
        return {data: []}
    },
    componentDidMount: function(){
        var self = this;
        $('#mytable').DataTable({
          "bAutoWidth": false,
          "bDestroy": true,     
          "fnDrawCallback": function() {                
                self.forceUpdate();         
          }, 
        });
        $("#mytable").resizableColumns();
    },
    componentDidUpdate: function(){
        $('#mytable').DataTable({
          "bAutoWidth": false,
          "bDestroy": true, 
        });
    },
    render: function(){
        var x = [];

        x.push(
            <tr><td>zaxs</td><td>hello</td><td>xzc</td></tr>
        )

        x.push(
            <tr><td>hello</td><td>wef</td><td>qw</td></tr>
        )

        x.push(
            <tr><td>wefwe</td><td>fgn</td><td>asc</td></tr>
        )

        return (
            <div className="table-responsive">
                <h4>Hello</h4>
                <table className="table table-bordered" id="mytable">
                    <thead>
                        <tr className="success">
                            <td>col1</td>
                            <td>col2</td>
                            <td>col3</td>
                        </tr>   
                    </thead>
                    <tbody>
                        {x}
                    </tbody>
                </table>
            </div>
        )       
    }
 });

React.render(<TodoApp />, document.body);