用 React 滑动 JS答案

【问题标题】：Glide JS with react用 React 滑动 JS
【发布时间】：2020-05-04 16:03:40
【问题描述】：

遵循文档并得到以下错误：TypeError：无法读取未定义的属性“querySelector”。我已将以下内容添加到我的 index.html

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

由于某种原因 glide 破坏了我的整个应用程序。为了让 GlideJS 在 create-react-app 中工作，我需要执行另一个步骤吗？任何建议都会有很大帮助。谢谢！我的代码如下：

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

【问题讨论】：

标签： reactjs glidejs

【解决方案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() 依赖项。

【讨论】：