reactjs - 我可以在反应中做一个单独的淡入淡出效果组件吗

Question

我正在做一个反应滑块，它工作正常。但是我想我的代码不是很好，我想改进它，所以你能告诉我哪部分代码可以改进，是否可以构建一个具有淡入淡出效果的单独组件，以便我可以通过在 App 中导入来添加该效果。 js。
屏幕短
https://codesandbox.io/s/just-practivce-0z7xt?file=/src/Slider.js

标签： reactjs

Answer 1

嗨，如果您多次使用相同的组件，我只是稍微更新一下您的 App 组件以使用地图

import React, { useState, useRef } from "react";
import "./styles.css";
import Slider from "./Slider";
import Button from "./Buttons";
import imageLists from "./imageLists";
import Paginations from "./Paginations";

export default function App() {
  const [index, setIndex] = useState(0);
  const images = imageLists;
  const fade = useRef();

  const nextBtn = () => {
    setIndex(index + 1);
    fadeIn();
  };
  const prevBtn = () => {
    setIndex(index - 1);
    fadeIn();
  };

  if (index === images.length) {
    setIndex(0);
  }
  if (index < 0) {
    setIndex(images.length - 1);
  }

  const fadeIn = () => {
    fade.current.classList.add("fadeIn");
    setTimeout(() => fade.current.classList.remove("fadeIn"), 500);
  };

  const activeCircle = num => {
    setIndex(num);
    fadeIn();
  };

  return (
    <div className="row no-gutters">
      <div className="container">
        <div className="col-sm-12">
          <h1 className="text-center mb-2">Image Slider</h1>
          <Slider index={index} images={images} myref={fade} />
          <div className="mb-3">
            {images.map((data,i)=>
            <Paginations
                click={() => activeCircle(i)}
                className={index === i ? "active" : ""}
              />
              )}          
          </div>
          <Button nextBtn={nextBtn} prevBtn={prevBtn} />
        </div>
      </div>
    </div>
  );
}