Question

我的反应组件有问题。在我试图绑定我的jquery DataTable。但每次我都会收到错误

未捕获的TypeError：$（...）。DataTable不是函数

这是我的实施。

var test = React.createClass({

componentDidMount: function () {

       var dataSet = [
                    [ '<div class="city-name">Arona Branch</div>', "Arona Street, Windhoek", '<div class="tel"> <span>Tel: 00 971 600 540000 </span> <span class="tel-or"> | </span> Fax: 00 971 4 222189</div>' ],
                    [ '<div class="city-name">Arona Branch</div>', "Arona Street, Windhoek", '<div class="tel"> <span>Tel: 00 971 600 540000 </span> <span class="tel-or"> | </span> Fax: 00 971 4 222189</div>' ],
                    [ '<div class="city-name">Arona Branch</div>', "Arona Street, Windhoek", '<div class="tel"> <span>Tel: 00 971 600 540000 </span> <span class="tel-or"> | </span> Fax: 00 971 4 222189</div>' ],
                    [ '<div class="city-name">Arona Branch</div>', "Arona Street, Windhoek", '<div class="tel"> <span>Tel: 00 971 600 540000 </span> <span class="tel-or"> | </span> Fax: 00 971 4 222189</div>' ],

        ]
        $('#buy-example').DataTable( {
            data: formattedResponse,
            columns: [
                { title: "Name" },
                { title: "Address" },
                { title: "Office" },
                { title: "Start date" }
            ],
            "columnDefs": [ {
                "targets": -1,
                "data": null,
                "defaultContent": '<button class="btn show-map"><img class="map-icon" src="abcd/map-icon.PNG" /> Show in map</button>'
            } ]
        } );
    })
},
render() {
    return (
       <div>
          <link rel="stylesheet" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" />
          <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>  
          <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>

      <div className="container">
          <table id="buy-example" className="display" width="100%"></table>
            <div id="no-search-data"> Test message </div>
       </div>
    )
}
})

非常欢迎专家建议!!

Answer 1

由于React在div渲染到包含脚本标记的页面之前开始运行代码;可能，反应找不到那些脚本（jquery和datatables）所以如果你正在本地尝试下载那些带有npm并将它们导入到你的组件文件中它会给出错误，如果没有尝试将这些脚本标签放到你的html底部file的body标签，而不是react类的内部。

Answer 2

尝试一下。

npm install --save datatables.net-dt

您需要在根组件中导入以下依赖关系：

import "datatables.net-dt/js/dataTables.dataTables"
import "datatables.net-dt/css/jquery.dataTables.min.css"

因此您可以加载表格。

componentDidMount() {
   $(document).ready(function () {
       $('#myTable').DataTable();
   });
}

对我有用。

ReactJS与Jquery DataTable问题

2 个答案: