将这个使用 HTML、CSS 和 Swiper js 制作的响应式博客卡片滑块转换为带有 Swiper js 的 React js

Question

我是 react 新手，我正在尝试在我的 react 项目中使用这个博客滑块 https://codepen.io/JavaScriptJunkie/pen/WgRBxw?editors=1100。

我将 HTML 转换为 jsx 并为其添加样式，但我不知道如何在我的 react 文件中使用 javascript 代码，它使用的是 Swiper js，但我无法在我的 react 代码中执行此操作。 我阅读了 swiperjs react 文档，但无法做到。

这是 Javascript 代码

var swiper = new Swiper('.blog-slider', {
      spaceBetween: 30,
      effect: 'fade',
      loop: true,
      mousewheel: {
        invert: false,
      },
      // autoHeight: true,
      pagination: {
        el: '.blog-slider__pagination',
        clickable: true,
      }
    });

请帮助我如何在我的 react 项目中使用这个 swiper js 代码

Answer 1

我不知道这是否是个好主意，但请尝试使用useEffect 钩子在客户端执行代码。 这就是我的做法。我在 react 应用的公共目录中的 index.html 文件的头部包含了 SwiperJs 所需的文件。

<link
  rel="stylesheet"
  href="https://unpkg.com/swiper@7/swiper-bundle.min.css"
/>

<script src="https://unpkg.com/swiper@7/swiper-bundle.min.js"></script>

然后在App.js 中使用了以下代码。

useEffect(() => {
    const script = document.createElement("script")
    script.innerHTML = `
    var swiper = new Swiper(".blog-slider", {
      spaceBetween: 30,
      effect: "fade",
      loop: true,
      mousewheel: {
        invert: false,
      },
      // autoHeight: true,
      pagination: {
        el: ".blog-slider__pagination",
        clickable: true,
      },
    })`
    document.body.appendChild(script)
  }, [])

这就是App.js 之后的样子，它的工作方式与在 codepen 中相同。

import { useEffect } from "react"
import "./App.css"

function App() {
  useEffect(() => {
    const script = document.createElement("script")
    script.innerHTML = `
    var swiper = new Swiper(".blog-slider", {
      spaceBetween: 30,
      effect: "fade",
      loop: true,
      mousewheel: {
        invert: false,
      },
      // autoHeight: true,
      pagination: {
        el: ".blog-slider__pagination",
        clickable: true,
      },
    })`
    document.body.appendChild(script)
  }, [])
  return (
    <div className="App">
      <div className="blog-slider">
        <div className="blog-slider__wrp swiper-wrapper">
          <div className="blog-slider__item swiper-slide">
            <div className="blog-slider__img">
              <img
                src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759872/kuldar-kalvik-799168-unsplash.jpg"
                alt=""
              />
            </div>
            <div className="blog-slider__content">
              <span className="blog-slider__code">26 December 2019</span>
              <div className="blog-slider__title">Lorem Ipsum Dolor</div>
              <div className="blog-slider__text">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Recusandae voluptate repellendus magni illo ea animi?{" "}
              </div>
              <a href="#" className="blog-slider__button">
                READ MORE
              </a>
            </div>
          </div>
          <div className="blog-slider__item swiper-slide">
            <div className="blog-slider__img">
              <img
                src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/jason-leung-798979-unsplash.jpg"
                alt=""
              />
            </div>
            <div className="blog-slider__content">
              <span className="blog-slider__code">26 December 2019</span>
              <div className="blog-slider__title">Lorem Ipsum Dolor2</div>
              <div className="blog-slider__text">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Recusandae voluptate repellendus magni illo ea animi?
              </div>
              <a href="#" className="blog-slider__button">
                READ MORE
              </a>
            </div>
          </div>

          <div className="blog-slider__item swiper-slide">
            <div className="blog-slider__img">
              <img
                src="https://res.cloudinary.com/muhammederdem/image/upload/v1535759871/alessandro-capuzzi-799180-unsplash.jpg"
                alt=""
              />
            </div>
            <div className="blog-slider__content">
              <span className="blog-slider__code">26 December 2019</span>
              <div className="blog-slider__title">Lorem Ipsum Dolor</div>
              <div className="blog-slider__text">
                Lorem ipsum dolor sit amet consectetur, adipisicing elit.
                Recusandae voluptate repellendus magni illo ea animi?
              </div>
              <a href="#" className="blog-slider__button">
                READ MORE
              </a>
            </div>
          </div>
        </div>
        <div className="blog-slider__pagination"></div>
      </div>
    </div>
  )
}

export default App