你如何使用鈎子將 w3school 幻燈片包含到 reactJS 組件中？

Question

我有一些需要遷移到 reactjs 的 javascript 代碼，我正在使用 react 鈎子

但是當我包含 javascript 文件時出現錯誤

類型錯誤：無法讀取未定義的屬性“樣式”

我的組件代碼

import React from "react";
import '../utils/slider';

export default function Slider()
{
    return(
        <div className="">
            <div className="slideshow-container" onmouseenter="pauseSlides()" onmouseleave="startSlides()">
                <div className="mySlides">
                    <img className ="img-responsive" src="image1.png" style="width:100%;"></img>
                </div>

                <div className="mySlides">
                    <img className ="img-responsive" src="image2.png" style="width:100%;"></img>
                </div>

                <div className="mySlides">
                    <img className ="img-responsive" src="image3.jpg" style="width:100%;"></img>
                </div>
            </div>

            <div style="text-align:center;">
                <span class="dot" onclick="currentSlide(0)"></span>
                <span class="dot" onclick="currentSlide(1)"></span>
                <span class="dot" onclick="currentSlide(2)"></span>
            </div>
        </div>
    );
}

我的 app.js

import React from 'react';
import Slider from "./components/Slider";

function App()
{
    return (
        <div className="App">
            <Slider />
        </div>
    );
}

export default App;

還有我的 JavaScript 代碼：

var slideIndex = 1;
var millis = 60000;

nextSlide();
var interval = setInterval(nextSlide, millis);

function resumeSlides()
{
    nextSlide();
}

function pauseSlides()
{
    clearInterval(interval);
}

function nextSlide()
{
    showSlide();
    slideIndex++;
}

function plusSlides(n)
{
    clearInterval(interval);
    slideIndex += n;
    nextSlide();
    interval = setInterval(nextSlide, millis);
}

function currentSlide(n)
{
    clearInterval(interval);
    slideIndex = n + 1;
    nextSlide();
    interval = setInterval(nextSlide, millis);
}

function showSlide()
{
    var i;
    var slides = document.getElementsByClassName("mySlides");
    var dots = document.getElementsByClassName("dot");
    
    for (i = 0; i < slides.length; i++)
        slides[i].style.display = "none";

    if (slideIndex > slides.length)
        slideIndex = 1;

    if (slideIndex < 1) 
        slideIndex = slides.length;

    for (i = 0; i < dots.length; i++) 
        dots[i].className = dots[i].className.replace(" active", "");

    slides[slideIndex - 1].style.display = "block";
    dots[slideIndex - 1].className += " active";
}

錯誤說它在第 63 行（類型錯誤：無法讀取未定義的屬性“樣式”）

  60 |      dots[i].className = dots[i].className.replace(" active", "");
  61 |  }
  62 | 
> 63 |  slides[slideIndex - 1].style.display = "block";
  64 |  dots[slideIndex - 1].className += " active";
  65 | }

Answer 1

好吧，它不應該工作，因為您在 React 代碼之外執行 JavaScript 代碼並且您希望它們一起工作。

您應該useState來存儲您的vars並在useEffect切換幻燈片。

這里或多或少是你應該瞄准的代碼

import React, { useEffect, useState } from "react";

export default function Slider() {
  // store your index and time in state
  const [slideIndex, setSlideIndex] = useState(1);
  const [millis, setMillis] = useState(2000);
  const [interval, setIntervalValue] = useState();

  // use effect to manage your interval
  useEffect(() => {
    startSlides();
    return pauseSlides;
  }, []);

  // change slides in effect
  useEffect(() => {
    showSlide();
  }, [slideIndex]);

  function nextSlide() {
    setSlideIndex((idx) => idx + 1); // use state set function
  }

  function currentSlide(idx) {
    setSlideIndex(idx);
  }

  function pauseSlides() {
    clearInterval(interval);
  }

  function startSlides() {
    nextSlide();
    const interval = setInterval(nextSlide, millis);
    setIntervalValue(interval);
  }

  function showSlide() {
    let slides = document.getElementsByClassName("mySlides");
    let dots = document.getElementsByClassName("dot");

    for (let i = 0; i < slides.length; i++) slides[i].style.display = "none";

    if (slideIndex > slides.length) {
      setSlideIndex(1);
    } else if (slideIndex < 1) {
      setSlideIndex(slides.length);
    } else {
      for (let i = 0; i < dots.length; i++)
        dots[i].className = dots[i].className.replace(" active", "");
      console.log(slideIndex);
      slides[slideIndex - 1].style.display = "block";
      dots[slideIndex - 1].className += " active";
    }
  }

  return (
    <div className="">
      <div
        className="slideshow-container"
        onMouseEnter={() => pauseSlides()}
        onMouseLeave={() => startSlides()}
      >
        <div className="mySlides">
          <img className="img-responsive" src="image1.png" alt="1"></img>
        </div>

        <div className="mySlides">
          <img className="img-responsive" src="image2.png" alt="2"></img>
        </div>

        <div className="mySlides">
          <img className="img-responsive" src="image3.jpg" alt="3"></img>
        </div>
      </div>

      <div>
        <span className="dot" onClick={() => currentSlide(0)}></span>
        <span className="dot" onClick={() => currentSlide(1)}></span>
        <span className="dot" onClick={() => currentSlide(2)}></span>
      </div>
    </div>
  );
}

如果您運行此代碼，它應該可以工作並在您的圖像應該去的地方切換數字。

同樣，這不是完美的代碼，因為缺少 split 和useCallback和useRef而不是文檔查詢，但它適用於您的情況，並為您提供了應該做什么的總體情況。