React 中的 Fancybox

我正在尝试将 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


凤凰求蛊
浏览 111回答 1
1回答

慕妹3242003

通过使用自定义 React Hooks 解决了这个问题。相同的逻辑也适用于 next.js自定义反应挂钩:import { useEffect } from "react";// The page will pass in the third party libraries it needs to useexport default function useThirdPartyLib(pagescripts) {&nbsp; useEffect(() => {&nbsp; &nbsp; function prepareScripts(...scripts) {&nbsp; &nbsp; &nbsp; return scripts.reduce((accu, script, index) => {&nbsp; &nbsp; &nbsp; &nbsp; const scriptTag = document.createElement("script");&nbsp; &nbsp; &nbsp; &nbsp; scriptTag.src = `/js/${script}`;&nbsp; &nbsp; &nbsp; &nbsp; scriptTag.id = `${script.split(".")[0].trim()}_${index.toString()}`;&nbsp; &nbsp; &nbsp; &nbsp; scriptTag.async = false;&nbsp; &nbsp; &nbsp; &nbsp; accu.push(scriptTag);&nbsp; &nbsp; &nbsp; &nbsp; return accu;&nbsp; &nbsp; &nbsp; }, []);&nbsp; &nbsp; }&nbsp; &nbsp; // Mount all prepared scripts onto the body&nbsp; &nbsp; prepareScripts(...pagescripts).map((script) => {&nbsp; &nbsp; &nbsp; return document.body.appendChild(script);&nbsp; &nbsp; });&nbsp; &nbsp; // Do Clean ups&nbsp; &nbsp; return () => {&nbsp; &nbsp; &nbsp; prepareScripts(...pagescripts).map((script) => {&nbsp; &nbsp; &nbsp; &nbsp; const body = document.getElementsByTagName("BODY")[0];&nbsp; &nbsp; &nbsp; &nbsp; const targetTag = body.querySelector(`#${script.getAttribute("id")}`);&nbsp; &nbsp; &nbsp; &nbsp; return targetTag.parentNode.removeChild(targetTag);&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; };&nbsp; }, []);}使用 fancyBox 的组件内部的用法import useThirdPartyLib from "../../../hooks/third-party-libs";export default function SplashScreen() {&nbsp; useThirdPartyLib(["jquery.js", "plugins.js", "modal.js"]);&nbsp; return (&nbsp; &nbsp; <div style={{ display: "none" }} id="splash_screen">&nbsp; &nbsp; &nbsp; <a href="/covid-19-test" className="campaign-wrapper">&nbsp; &nbsp; &nbsp; &nbsp; <img&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; src="/images/campaigns/campaign-1.png"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; width="731"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; height="731"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; alt="Campaign Pic"&nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; </a>&nbsp; &nbsp; </div>&nbsp; );}包含 jQuery fancybox 标记的 modal.js 文件jQuery(function () {&nbsp; if ($("#splash_screen").length) {&nbsp; &nbsp; $.fancybox.open({&nbsp; &nbsp; &nbsp; src: "#splash_screen",&nbsp; &nbsp; &nbsp; type: "inline",&nbsp; &nbsp; &nbsp; btnTpl: {&nbsp; &nbsp; &nbsp; &nbsp; smallBtn:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<button type="button" data-fancybox-close class="fancybox-button fancybox-close-small my-close" title="{{CLOSE}}"><span class="close-text">Close this Window</span>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; '<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>' +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "</button>"&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; });&nbsp; } // EndIf}); // Docx ready
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript