我有一些需要迁移到 reactjs 的 javascript 代码,我正在使用 react hooks
但是当我包含 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 | }
最佳答案
嗯,它不应该工作,因为你在 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
而不是文档查询,但它适用于您的情况并为您提供整体情况应该做什么。
关于javascript - 你如何使用钩子(Hook)将 w3school 幻灯片包含到 reactJS 组件中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63739100/