ReactJS与Jquery DataTable问题(ReactJS with Jquery DataTable Issue)

ReactJS与Jquery DataTable问题(ReactJS with Jquery DataTable Issue)

我对我的反应组件有问题。 在与我试图绑定我的jQuery数据表。 但每次我都会收到错误信息

Uncaught 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> ) } })

专家的建议是最受欢迎的！

I am having issue with my react component. In with i tried to bind my jquery DataTable. but every time i am getting error as

Uncaught TypeError: $(...).DataTable is not a function

Here is my implementation.

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

Expert advice is most welcome!!

最满意答案

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

Since React starts running code before your div rendered to the page which includes script tags; probably, react can't find those scripts (jquery and datatables) so it gives error if you are working on local try to download those with npm and import them into your component file, if not try to put those script tags into bottom your html file's body tag instead of inside of react class.