Javascript Jquery DataTable问题的ReactJS

我的react组件有问题。在中，我尝试绑定jquery数据表。但每次我都会犯错误

未捕获的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>
    )
}
})

var test=React.createClass({
componentDidMount:函数（）{
变量数据集=[
[“Arona分行”，“温得和克Arona街”，“电话：00 971 600 540000 |传真：00 971 4 222189”]，
[“Arona分行”，“温得和克Arona街”，“电话：00 971 600 540000 |传真：00 971 4 222189”]，
[“Arona分行”，“温得和克Arona街”，“电话：00 971 600 540000 |传真：00 971 4 222189”]，
[“Arona分行”，“温得和克Arona街”，“电话：00 971 600 540000 |传真：00 971 4 222189”]，
]
$（“#购买示例”）。数据表（{
数据：格式化响应，
栏目：[
{标题：“姓名”}，
{标题：“地址”}，
{标题：“办公室”}，
{标题：“开始日期”}
],
“columnDefs”：[{
“目标”：-1，
“数据”：空，
“defaultContent”：“在地图中显示”
} ]
} );
})
},
render（）{
返回(
测试消息
)
}
})

---

欢迎专家咨询

因为React在将div呈现到包含脚本标记的页面之前开始运行代码；react可能找不到这些脚本（jquery和datatables），因此如果您正在本地工作，请尝试使用npm下载这些脚本并将其导入组件文件，如果不尝试将这些脚本标记放入html文件的body标记底部，而不是react类内部，则会出现错误。

尝试此操作

npm安装--保存datatables.net-dt

在根组件中，需要导入此依赖项：

导入“datatables.net dt/js/datatables.datatables” 导入“datatables.netdt/css/jquery.datatables.min.css” 这样您就可以加载您的表了

componentDidMount（）{
$（文档）.ready（函数（）{
$（'#myTable'）.DataTable（）；
});
}

---

这对我很管用

尝试将jquery和jquery.datatables包含在html文件的底部，而不是您的应用程序中component@mostafatourad我也试过，但没有运气