如何使用 React Hooks 构建全屏滑块

在本教程中，我们将使用 React Hooks 构建一个全屏滑块组件。
为此，我们将创建一个自定义钩子来处理所有逻辑，然后将其用作辅助方法来显示幻灯片。

那么，让我们先来规划一下我们的应用程序是什么样子的。

规划我们的应用程序
创建自定义钩子
显示滑块

规划我们的应用程序

为了能够继续操作，您必须通过在终端上运行以下命令来创建一个全新的 React 应用程序：

npx create-react-app react-fullscreen-slider

接下来，按如下方式构建您的项目：

├── App.js
├── App.test.js
├── components
|  └── Slider.js
├── hooks
|  └── useSlider.js
├── images.js
├── index.css
├── index.js
├── logo.svg
├── serviceWorker.js
└── setupTests.js

如你所见，文件夹结构非常简单。我们有一个components文件夹，里面包含一个名为的文件Slider.js；另一个文件夹hooks，里面保存着你可能猜到的自定义钩子useSlider；还有一个images.js文件，里面包含要在滑块上显示的图像。

现在，让我们在这些文件中添加一些代码行。

images.js

export default [
    {
     src: 'https://drive.google.com/uc?id=1_oA9Sx4D4DhFrYBFQdL0I1CUIz_LhQue',
     text: 'Duis aute irure dolor in reprehenderit in voluptate velit esse'
    },
    {
     src: 'https://drive.google.com/uc?id=1rJFs-8So16UCiDag__hG4yyf_RnC08Fa',
     text: 'Consectetur adipisicing elit cillum dolore eu fugiat nulla'
    },
    {
     src: 'https://drive.google.com/uc?id=1HO2AGjd_1yyYI4pYTTBmGXBaWHoGSqCl',
     text: 'Asperiores ex animi explicabo cillum dolore eu fugiat nulla'
    }
]

正如我之前所说，这个文件保存的是图片。每个对象都有一张图片和一段描述。顺便说一下，你可以使用不同的方法来声明你的图片，这完全取决于你。

我们现在有了要显示的数据，是时候构建自定义钩子来处理滑块的逻辑了。

让我们这样做

创建自定义钩子

该useSlider函数将接收三个参数：幻灯片的图像、描述和图像数组。

hooks/useSlider.js

import { useEffect } from 'react'

const useSlider = (slideImage, slideText, images) => {
 let slideCounter = 0;

 useEffect(() => startSlider())

 const startSlider =() => {
    slideImage.current.style.backgroundImage = `linear-gradient(
        to right,
        rgba(34, 34, 34, 0.4),
        rgba(68, 68, 68, 0.4)
        ), url(${images[0].src})`;
        slideText.current.innerHTML = images[0].text;
}

有了这些参数，我们现在可以创建一个新函数startSlider()并处理页面加载完成时显示的第一张幻灯片。

稍后，我们将使用useRef来选择元素并操作 DOM（文档对象模型）。但现在，只需记住slideImage和slideText是对 DOM 元素的引用。

现在我们可以访问这些元素的属性并开始设置样式。在这里，我们对图像应用线性渐变，以获得美观的样式，然后将相应的文本附加到 DOM 中。

hooks/useSlider.js

const handleSlide = (slide) => {
 slideImage.current.style.backgroundImage = `linear-gradient(
    to right,
    rgba(34, 34, 34, 0.4),
    rgba(68, 68, 68, 0.4)
    ), url(${images[slide - 1].src})`;
    slideText.current.innerHTML = images[slide - 1].text;
    animateSlide(slideImage)
}

const animateSlide = () => {
 slideImage.current.classList.add('fadeIn');
  setTimeout(() => {
    slideImage.current.classList.remove('fadeIn');
  }, 700);
}

接下来，我们使用与函数相同的方法handleSlide()，对图像应用线性渐变。但这次，我们接收幻灯片或计数器的编号（如果需要）作为参数，然后使用它在屏幕上显示相应的幻灯片。

接下来，我们调用该animateSlide()方法，并用漂亮的淡入效果为其添加动画效果。

hooks/useSlider.js

const goToPreviousSlide = () => {
  if (slideCounter === 0) {
    handleSlide(images.length)
    slideCounter = images.length;
  }

    handleSlide(slideCounter)         
    slideCounter--;
  }

const goToNextSlide = () => {
  if (slideCounter === images.length - 1) {
    startSlider()
    slideCounter = -1;
    animateSlide(slideImage)
  }

 slideImage.current.style.backgroundImage = `linear-gradient(
        to right,
        rgba(34, 34, 34, 0.4),
        rgba(68, 68, 68, 0.4)
        ),url(${images[slideCounter + 1].src})`;
    slideText.current.innerHTML = images[slideCounter + 1].text;
    slideCounter++;
      animateSlide(slideImage)
}

return { goToPreviousSlide, goToNextSlide }
}

export default useSlider

如您所见，这里我们有两个主要功能：goToPreviousSlide()和goToNextSlide()。

第一种方法goToPreviousSlide()将检查幻灯片的计数器是否等于 0。如果是，则显示最后一张幻灯片，否则，显示上一张幻灯片。

第二种方法则相反。它检查幻灯片的计数器是否等于最后一张幻灯片，如果是，则重新启动幻灯片；否则，该goToNextSlide()方法将显示下一张幻灯片。

为了使所有内容都可以从另一个文件访问，我们必须返回一个包含goToPreviousSlide()和的对象goToNextSlide()。

话虽如此，我们现在可以转到最后一部分，并使用自定义钩子在下一部分中显示滑块。

显示滑块

我们已经有了显示幻灯片的逻辑，现在我们唯一要做的就是用显示它们Slider.js。

Slider.js

import React, { useRef } from 'react';
import useSlider from '../hooks/useSlider'

const Slider = ({images}) => {

  const slideImage = useRef(null)
  const slideText = useRef(null)
  const { goToPreviousSlide, goToNextSlide } = useSlider(slideImage, slideText, images)

  return (
    <div className="slider" ref={slideImage}>
      <div className="slider--content">
        <button onClick={goToPreviousSlide} className="slider__btn-left">
        <i className="fas fa-angle-left"></i>
        </button>
        <div className="slider--feature">
          <h1 className="feature--title">Dreaming</h1>
          <p ref={slideText} className="feature--text"></p>
          <button className="feature__btn">Get started</button>
        </div>
        <button onClick={goToNextSlide} className="slider__btn-right">
        <i className="fas fa-angle-right"></i>
        </button>
     </div>
    </div>
    );
}

export default Slider;

我忘了说了，CSS 部分不在本文中介绍，你仍然可以在源代码中找到它。所以，不要让这些类名困扰你。

由于我们已经有了，因此该Slider()功能相对容易实现useSlider。

我们唯一要做的就是导入useSlider，然后拉取goToPreviousSlide()，并且goToNextSlide()不要忘记将参数作为参数传递给函数。

正如我之前所说，我们必须使用它useRef来访问 DOM 元素。

通过这一改变，我们现在可以在文件中使用 Slider 组件App.js并将图像数组作为 props 传递下去。

App.js

import React from 'react';
import Slider from './components/Slider'
import Images from './images'

function App() {
  return (
    <Slider images={Images}  />
  );
}

export default App;

正如您在此处看到的，我们只需导入Images并将它们作为道具传递给 Slider 组件。

通过这个小小的更新，我们现在已经使用 React Hooks 构建了全屏滑块组件。

感谢阅读！

您可以在这里找到源代码

叽叽喳喳	博客	通讯	GitHub	领英	CODEPEN	开发

鏂囩珷鏉ユ簮锛�https://dev.to/ibrahima92/how-to-build-a-fullscreen-slider-with-react-hooks-233k