ReactJS 与 Jquery DataTable 问题

Question

我的反应组件有问题。 在与我试图绑定我的 jquery 数据表。 但每次我收到错误时

未捕获的类型错误：$(...).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 呈现到包含脚本标签的页面之前开始运行代码； 可能，react 找不到那些脚本（jquery 和数据表），所以如果你在本地工作，它会出错尝试用 npm 下载那些脚本并将它们导入你的组件文件，如果没有尝试将这些脚本标签放入你的 html 底部文件的正文标记而不是反应类内部。

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

那对我有用。