用反应滑翔JS

Question

跟随文档并得到以下错误: TypeError:无法读取未定义的属性'querySelector‘。我已将以下内容添加到我的index.html中

<link
      rel="stylesheet"
      href="node_modules/@glidejs/glide/dist/css/glide.core.min.css"
    /> 

由于某种原因，滑动破坏了我的整个应用程序。为了让GlideJS在一个创建-反应-应用程序中工作，我还需要遵循另一个步骤吗？任何建议都会有很大帮助。谢谢!我的代码如下：

import React from "react"
import Glide from "@glidejs/glide"

const Test = () => {
  new Glide(".glide").mount()
  return (
    <>
      {" "}
      <div className='glide'>
        <div className='glide__track' data-glide-el='track'>
          <ul className='glide__slides'>
            <li className='glide__slide slider'>1</li>
            <li className='glide__slide slider'>2</li>
            <li className='glide__slide slider'>3</li>
            <li className='glide__slide slider'>4</li>
          </ul>
        </div>
        <div className='glide__arrows' data-glide-el='controls'>
          <button
            className='glide__arrow glide__arrow--prev'
            data-glide-dir='<'
          >
            prev
          </button>
          <button
            className='glide__arrow glide__arrow--next'
            data-glide-dir='>'
          >
            next
          </button>
        </div>
      </div>
    </>
  )
}

export default Test

Answer 1

使用useEffect模拟componentDidMount()。并在useEffect()中挂载滑块。

试着做这样的事情：

import React, { useEffect } from "react"
import Glide from "@glidejs/glide"

// Using SCSS
import "./styles.scss"

const sliderConfiguration= {
  gap: 20,
  perView: 2,
  startAt: 0,
  type: "slider"
};

const Test = () => {
  const slider = new Glide('.glide', sliderConfiguration);

  useEffect(() => {
    return () => slider.mount()
  }, [slider])

  return (
    <>
      {" "}
      <div className='glide'>
        <div className='glide__track' data-glide-el='track'>
          <ul className='glide__slides'>
            <li className='glide__slide slider'>1</li>
            <li className='glide__slide slider'>2</li>
            <li className='glide__slide slider'>3</li>
            <li className='glide__slide slider'>4</li>
          </ul>
        </div>
        <div className='glide__arrows' data-glide-el='controls'>
          <button
            className='glide__arrow glide__arrow--prev'
            data-glide-dir='<'
          >
            prev
          </button>
          <button
            className='glide__arrow glide__arrow--next'
            data-glide-dir='>'
          >
            next
          </button>
        </div>
      </div>
    </>
  )
}

export default Test

styles.scss

// Required Core Stylesheet
@import "node_modules/@glidejs/glide/src/assets/sass/glide.core";

注意:如果您的幻灯片项使用动态数据，则应该将包含数据的变量传递给useEffect()依赖项。

Answer 2

这里有一种不同的方法来做同样的事情：

import React, { useEffect } from 'react';

import './Test.css';

const Test = () => {
  useEffect(() => {
    // eslint-disable-next-line no-unused-vars
    window.addEventListener('load', (event) => {
      // eslint-disable-next-line no-undef
      new Glide('.glide', {
        gap: 50,
        // eslint-disable-next-line no-undef
        // focusAt: 1,
        peek: 200,
        perView: 3,
        type: 'carousel',
        breakpoints: {
          1600: {
            perView: 2,
          },
          1100: {
            perView: 1,
            peek: 80,
          },
        },
      }).mount();
    });
  }, []);

  return (
    <div className="tiers" id="tiers">
      <h2 className="sectionTitle">Tiers</h2>

      <div className="glide">
        <div className="glide__track" data-glide-el="track">
          <div className="glide__slides">
            <div className="glide__slide tierBox">
              <h4>Tier One</h4>
              <span className="tierTitle">Description:</span>

              <span className="tierTitle">Cost:</span>

              <span className="tierTitle">Starting:</span>

              <span className="tierTitle">Test:</span>

              <span className="tierTitle">Test 2:</span>
            </div>

            <div className="glide__slide tierBox">
              <h4>Tier One</h4>
              <span className="tierTitle">Description:</span>

              <span className="tierTitle">Cost:</span>

              <span className="tierTitle">Starting:</span>

              <span className="tierTitle">Test:</span>

              <span className="tierTitle">Test 2:</span>
            </div>

            <div className="glide__slide tierBox">
              <h4>Tier One</h4>
              <span className="tierTitle">Description:</span>

              <span className="tierTitle">Cost:</span>

              <span className="tierTitle">Starting:</span>

              <span className="tierTitle">Test:</span>

              <span className="tierTitle">Test 2:</span>
            </div>

            <div className="glide__slide tierBox">
              <h4>Tier One</h4>
              <span className="tierTitle">Description:</span>

              <span className="tierTitle">Cost:</span>

              <span className="tierTitle">Starting:</span>

              <span className="tierTitle">Test:</span>

              <span className="tierTitle">Test 2:</span>
            </div>

            <div className="glide__slide tierBox">
              <h4>Tier One</h4>
              <span className="tierTitle">Description:</span>

              <span className="tierTitle">Cost:</span>

              <span className="tierTitle">Starting:</span>

              <span className="tierTitle">Test:</span>

              <span className="tierTitle">Test 2:</span>
            </div>
          </div>
        </div>
        <div className="glide__arrows" data-glide-el="controls">
          <button type="button" className="glide__arrow glide__arrow--left" data-glide-dir="<">prev</button>
          <button type="button" className="glide__arrow glide__arrow--right" data-glide-dir=">">next</button>
        </div>
      </div>

    </div>
  );
};
export default Test;

如果要将Glide.js脚本插入到index.html的头中，也不需要从"@glidejs/ Glide“导入幻灯片。