我正在尝试将 fancyBox 包含在我的 React 应用程序中。我将 css 和 js 包含在我的 index.html 文件中
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.css" media="screen">
<script src="//cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"></script>
然后,在我的组件中我尝试使用它:
...
import "datatables.net-dt/js/dataTables.dataTables"
import "datatables.net-dt/css/jquery.dataTables.min.css"
const $ = require("jquery");
$.DataTable = require("datatables.net");
...
componentDidMount = async () => {
$(() => {
$('#myTable').DataTable({
pageLength : 5,
lengthMenu: [[5, 10, 50, -1], [5, 10, 50, 'All']]
});
$(".fancybox").fancybox({
openEffect: "none",
closeEffect: "none"
});
});
}
...
render() {
...
<div className="col-lg-3 col-md-4 col-xs-6 thumb">
<a href="https://images.pexels.com/photos/62307/air-bubbles-diving-underwater-blow-62307.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" className="fancybox" rel="ligthbox">
<img src="https://images.pexels.com/photos/62307/air-bubbles-diving-underwater-blow-62307.jpeg?auto=compress&cs=tinysrgb&h=650&w=940" className="zoom img-fluid " alt />
</a>
</div>
...
它正在返回: TypeError: $(...).fancybox is not a function
慕妹3242003
相关分类