javascript - 在 SPFx 项目中使用光滑的轮播。我正在加载库，但出现一些奇怪的控制台错误

Question

我引用这样的 CSS 和 JS 文件:

    SPComponentLoader.loadCss('../node_modules/slick-carousel/slick/slick.css');
    SPComponentLoader.loadCss('../node_modules/slick-carousel/slick/slick-theme.css');
    SPComponentLoader.loadScript('../node_modules/slick-carousel/slick/slick.min.js');

当我进入 Chrome 中的开发工具并查看源代码时，我可以进入并且所有文件都在那里。

但是在控制台中我收到以下错误:

Failed to load resource: net::ERR_NAME_NOT_RESOLVED

Uncaught (in promise) Error: Error: Unable to load script https://relative-path.invalid/jquery
    Error loading https://relative-path.invalid/jquery as "jquery" from https://localhost:4321/node_modules/slick-carousel/slick/slick.min.js

这是通过 CDN 引用 jQuery 时的情况。我还尝试通过 TypeScripts import 语句并使用上面使用的 .loadScript 方法来引用它。

有人知道出了什么问题吗？

Answer 1

像这样导入jQUery

import * as $ from 'jquery';

我的类构造函数

public constructor() {
    super();

    SPComponentLoader.loadCss('../../node_modules/slick-carousel/slick/slick.css');
    SPComponentLoader.loadCss('../../node_modules/slick-carousel/slick/slick-theme.css');
  }

我的渲染方法:

public render(): void {
    this.domElement.innerHTML = `
      <div class="container">
        <div class="your-class">
          <div>your content</div>
          <div>your content</div>
          <div>your content</div>
        </div>
      </div>
      `;

      require('../../../node_modules/slick-carousel/slick/slick.js');

      $('.your-class').slick();

  }

它很丑，而且没有箭头按钮，但我可以通过用鼠标拖动它来使其滑动。