需要在document.queryselector的nextjs页面上插入useEffect状态的帮助

Question

我需要帮助输入useEffect钩子，以便使document.queryselector在代码的底部工作。javascript的基本功能是获取数字和一个圆形进度条，并将数字和进度条对齐，以同时移动它增加的每个数字。我只需要帮助添加useEffect挂钩，并使其在页面刷新时工作。：

import { SearchIcon } from "@heroicons/react/outline";
import { useState } from "react";
import News from "./News";
import { AnimatePresence, motion } from "framer-motion"; 
import dynamic from 'next/dynamic'
import {useEffect} from "react";

export default function Widgets({newsResults}) {
const[articleNum, setArticleNum] = useState(3);
return (
<div className="xl:w-[600px] lg:inline ml-8 space-y-5">
<div className="w-[90%] xl:w-[75%] sticky top-0 bg-white py-1.5 z-50">
<div className="flex items-center p-3 rounded-full bg-red-300 relative">
<SearchIcon className="h-5 z-50 text-gray-500 "/>
<input className="absolute inset-0 rounded-full pl-11 border-gray-500 text-gray-700 focus:shadow-lg focus:bg-white bg-gray-100" type="text" placeholder="Search RUbars" />
</div>
</div>
{/* <div className="text-gray-700 space-y-3 bg-gray-100 rounded-xl pt-2 w-[90%] xl:w-[75%]">
<h4 className="font-bold text-xl px-4">Whats happening</h4>
<AnimatePresence>
{newsResults.slice(0,articleNum).map((article)=>(
<motion.div key={article.title} initial={{opacity: 0 }} animate={{opacity: 1}} exit={{opacity: 0}} transition={{duration: 1}}>
<News key={article.title} article={article}/>
</motion.div>
))}
</AnimatePresence>
<button onClick={()=>setArticleNum(articleNum + 3)} className="text-rose-300 pl-4 pb-3 hover:text-rose-400">Show more</button>
</div> */}
<div className="text-gray-700 space-y-3 bg-gray-100 pt-2 rounded-xl w-[90%] xl:w-[75%]">
<h4 className="font-bold text-xl px-4">Capacity</h4>
<div class="container">
<div class="circular-progress">
<span class="progress-value">0%</span>
</div>
<span className="text">Olde Queens</span>
<div class="circular-progress">
<span className="progress-value">0%</span>
</div>
<span className="text1">Golden Rail</span>
<div class="circular-progress1">
<span className="progress-value1">0%</span>
</div>
<span className="text">Huey&apos;s Knight Club</span>
<button className="text-rose-300 pl-4 pb-3 hover:text-rose-400">Show more</button>
</div>
</div>
</div>
)
}
let circularProgress = document.querySelector(".circular-progress"),
progressValue = document.querySelector(".progress-value");
let progressStartValue = 0,
progressEndValue = 24,
speed = 40;
let progress = setInterval(() =>{
progressStartValue++;
progressValue.textContent = `${progressStartValue}%`
circularProgress.style.background = `conic-gradient(#E0115F ${progressStartValue * 3.6}deg, #ededed 0deg)`
if(progressStartValue == progressEndValue){
clearInterval(progress);
}
console.log(progressStartValue);
}, speed);

我知道它必须看起来像这样：

useEffect(() => {
let circularProgress = document.querySelector(".circular-progress");
console.log(circularProgress)
}, []);

但我真的不知道如何在底部插入它。

Answer 1

使用状态进行进度，并将useEffect函数放入Widgets组件中，当您的状态发生变化时，会重新绘制组件以更新视图模板。

使用不同的结束值和速度对多个进度进行代码编辑

export default function Widgets({newsResults}) {
const[articleNum, setArticleNum] = useState(3);
const[progressValue1, setProgressValue1] = useState(0);
const[progressValue2, setProgressValue2] = useState(0);
const[progressValue3, setProgressValue3] = useState(0);
let progressEndValue1 = 24, progressEndValue2 = 34, progressEndValue3 = 44,
progressStartValue1 = 0, progressStartValue2 = 0, progressStartValue3 = 0;
useEffect(() => {
const progress1 = setInterval(() =>{
if(progressEndValue1 > progressStartValue1){
progressStartValue1++;
setProgressValue1(progressStartValue1);
console.log(progressValue1)
}
else{
clearInterval(progress1);
}
}, 200);
const progress2 = setInterval(() =>{
if(progressEndValue2 > progressStartValue2){
progressStartValue2++
setProgressValue2(progressStartValue2);
}
else{
clearInterval(progress2);
}
}, 300);
const progress3 = setInterval(() =>{
if(progressEndValue3 > progressStartValue3){
progressStartValue3++;
setProgressValue3(progressStartValue3);
}
else{
clearInterval(progress3);
}
}, 400);
}, []);
return (
<div className="xl:w-[600px] lg:inline ml-8 space-y-5">
<div className="w-[90%] xl:w-[75%] sticky top-0 bg-white py-1.5 z-50">
<div className="flex items-center p-3 rounded-full bg-red-300 relative">
<SearchIcon className="h-5 z-50 text-gray-500 "/>
<input className="absolute inset-0 rounded-full pl-11 border-gray-500 text-gray-700 focus:shadow-lg focus:bg-white bg-gray-100" type="text" placeholder="Search RUbars" />
</div>
</div>
{/* <div className="text-gray-700 space-y-3 bg-gray-100 rounded-xl pt-2 w-[90%] xl:w-[75%]">
<h4 className="font-bold text-xl px-4">Whats happening</h4>
<AnimatePresence>
{newsResults.slice(0,articleNum).map((article)=>(
<motion.div key={article.title} initial={{opacity: 0 }} animate={{opacity: 1}} exit={{opacity: 0}} transition={{duration: 1}}>
<News key={article.title} article={article}/>
</motion.div>
))}
</AnimatePresence>
<button onClick={()=>setArticleNum(articleNum + 3)} className="text-rose-300 pl-4 pb-3 hover:text-rose-400">Show more</button>
</div> */}
<div className="text-gray-700 space-y-3 bg-gray-100 pt-2 rounded-xl w-[90%] xl:w-[75%]">
<h4 className="font-bold text-xl px-4">Capacity</h4>
<div className="container">
<div className="circular-progress" style={{background: `conic-gradient(#E0115F ${progressValue1 * 3.6}deg, #ededed 0deg)`}}>
<span className="progress-value">{progressValue1}%</span>
</div>
<span className="text">Olde Queens</span>
<div className="circular-progress" style={{background: `conic-gradient(#E0115F ${progressValue2 * 3.6}deg, #ededed 0deg)`}}>
<span className="progress-value">{progressValue2}%</span>
</div>
<span className="text1">Golden Rail</span>
<div className="circular-progress1" style={{background: `conic-gradient(#E0115F ${progressValue3 * 3.6}deg, #ededed 0deg)`}}>
<span className="progress-value1">{progressValue3}%</span>
</div>
<span className="text">Huey&apos;s Knight Club</span>
<button className="text-rose-300 pl-4 pb-3 hover:text-rose-400">Show more</button>
</div>
</div>
</div>
)
}