Javascript 反应中的Fancybox

我正在尝试将fancyBox包括在我的React应用程序中。 我在index.html文件中包含了css和js

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

  ...

。。。
导入“datatables.net dt/js/datatables.datatables”
导入“datatables.netdt/css/jquery.datatables.min.css”
const$=require（“jquery”）；
$.DataTable=require（“datatables.net”）；
...
componentDidMount=async（）=>{
$(() => {
$（'#myTable'）。数据表({
页长：5，
长度菜单：[[5,10,50，-1]，[5,10,50，'全部']]
});
$（“.fancybox”）.fancybox({
openEffect：“无”，
封闭效应：“无”
});  
});
}
...
render（）{
...
...

它正在返回：

---

TypeError:$（…）。fancybox不是一个函数

通过使用自定义的React钩子解决了这个问题。同样的逻辑在next.js中也会起作用

• 自定义反应挂钩：

• 使用fancyBox的组件内部的用法

从“../../../hooks/third partylib”导入UsedThirdPartylib；
导出默认函数SplashScreen（）{
使用第三方数据库（[“jquery.js”、“plugins.js”、“modal.js]”）；
返回(
);
}

• 包含jQuery fancybox标记的modal.js文件

jQuery（函数（）{
如果（$（“#启动屏幕”）.长度）{
$.fancybox.open({
src:“启动屏幕”，
键入：“内联”，
btnTpl:{
smallBtn：
“关闭此窗口”+
'' +
""
}
});
}//EndIf
})；//Docx就绪

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);
      });
    };
  }, []);
}

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

export default function SplashScreen() {
  useThirdPartyLib(["jquery.js", "plugins.js", "modal.js"]);
  return (
    <div style={{ display: "none" }} id="splash_screen">
      <a href="/covid-19-test" className="campaign-wrapper">
        <img
          src="/images/campaigns/campaign-1.png"
          width="731"
          height="731"
          alt="Campaign Pic"
        />
      </a>
    </div>
  );
}

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