首頁猿問 React 中的 Fancybox

React 中的 Fancybox

JavaScript

鳳凰求蠱 2023-09-28 10:00:47

我正在嘗試將 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

查看完整描述

1 回答

慕妹3242003

TA貢獻1824條經驗獲得超6個贊

通過使用自定義 React Hooks 解決了這個問題。相同的邏輯也適用于 next.js

自定義反應掛鉤：

import { useEffect } from "react";

// The page will pass in the third party libraries it needs to use

export default function useThirdPartyLib(pagescripts) {

useEffect(() => {

function prepareScripts(...scripts) {

return scripts.reduce((accu, script, index) => {

const scriptTag = document.createElement("script");

scriptTag.src = `/js/${script}`;

scriptTag.id = `${script.split(".")[0].trim()}_${index.toString()}`;

scriptTag.async = false;

accu.push(scriptTag);

return accu;

}, []);

}

// Mount all prepared scripts onto the body

prepareScripts(...pagescripts).map((script) => {

return document.body.appendChild(script);

});

// Do Clean ups

return () => {

prepareScripts(...pagescripts).map((script) => {

const body = document.getElementsByTagName("BODY")[0];

const targetTag = body.querySelector(`#${script.getAttribute("id")}`);

return targetTag.parentNode.removeChild(targetTag);

});

};

}, []);

}

使用 fancyBox 的組件內部的用法

import useThirdPartyLib from "../../../hooks/third-party-libs";

export default function SplashScreen() {

useThirdPartyLib(["jquery.js", "plugins.js", "modal.js"]);

return (

<img

src="/images/campaigns/campaign-1.png"

width="731"

height="731"

alt="Campaign Pic"

</a>

</div>

);

}

包含 jQuery fancybox 標記的 modal.js 文件

jQuery(function () {

if ($("#splash_screen").length) {

$.fancybox.open({

src: "#splash_screen",

type: "inline",

btnTpl: {

smallBtn:

'<button type="button" data-fancybox-close class="fancybox-button fancybox-close-small my-close" title="{{CLOSE}}"><span class="close-text">Close this Window</span>' +

'<span class="icon"><svg xmlns="http://www.w3.org/2000/svg" version="1" viewBox="0 0 28 28"><path d="M14 16l12-12-1-1-12 12-12-12-1 1 12 12-12 12 1 1 12-12 12 12 1-1z"/></svg></span>' +

"</button>"

}

});

} // EndIf

}); // Docx ready

反對回復 2023-09-28

1 回答
0 關注
134 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

React 中的 Fancybox

React 中的 Fancybox

1 回答

添加回答