文档准备好时导入 npm (ReactJS/Next.js)

Question

我正在尝试使用这个名为 float-sidebar.js 的小型 js 库，我已经通过 npm 安装了该模块，但我注意到在反应中它会抛出错误“窗口”未定义，因为在代码浮动中使用了“窗口” -sidebar.min.js 在模块内，而不检查 window 是否已加载或准备好。

由于我使用的是 Next.js 我尝试动态加载模块，如：

import dynamic from 'next/dynamic'
const FloatSidebar = dynamic(
  () => import('float-sidebar'),
  { ssr: false }
)

这样做它不会再抛出“窗口”未定义错误，但它说FloatSidebar不是 function 稍后在我的代码中：

const handleScroll = () => {

    const sidebar = document.querySelector('.sidebar');
    const relative = document.querySelector('.content');

    const floatSidebar = FloatSidebar({
      sidebar: sidebar,
      relative: relative,
      topSpacing: 40,
      bottomSpacing: 40
    });

    floatSidebar.forceUpdate();
  }

Answer 1

您可以简单地在您的handleScroll回调中的float-sidebar上使用常规的ES2020 动态导入。

const handleScroll = () => {
    const sidebar = document.querySelector('.sidebar');
    const relative = document.querySelector('.content');
    
    const FloatSidebar = (await import('float-sidebar')).default;
    const floatSidebar = FloatSidebar({
      sidebar: sidebar,
      relative: relative,
      topSpacing: 40,
      bottomSpacing: 40
    });
    floatSidebar.forceUpdate();
}