const Carouselv2 = ({topMovies}) =>; { //参考文献 const trackRef = useRef(); const nextBtnRef = useRef(); const prevBtnRef = useRef(); const navDotsRef = useRef(); //在道具加载时初始化轮播 const [isLoading, setIsLoading] = useState(true); useEffect(() => { if (topMovies && setIsLoading) { const Slides = Array.from(trackRef.current.children); Slides[0].classList.add('当前幻灯片'); //将第一张幻灯片标记为可见 const SlideWidth = Slides[0].getBoundingClientRect().width; const setSlidePosition = (幻灯片, 索引) => { Slide.style.left = SlideWidth * 索引 + 'px'; } 幻灯片.forEach(setSlidePosition); //将幻灯片并排排列 setIsLoading(假); } }, [热门电影]); //按钮功能 const moveToSlide = (currentSlide, targetSlide) =>; { //trackRef.current.style.transform = 'translateX(-' + targetSlide.style.left + ')'; currentSlide.classList.remove('当前幻灯片'); //targetSlide.classList.add('当前幻灯片'); } const updateDots = () =>; { } constresponsiveBtns = () =>; { } const prevSlide = (e) =>; { } const nextSlide = (e) =>; { const currentSlide = trackRef.current.querySelector('.current-slide'); const nextSlide = trackRef.current.children.nextElementSibling; moveToSlide(当前幻灯片, 下一个幻灯片); } 返回 (<按钮 className="carousel_button carousel_button--left" ref={prevBtnRef}><FontAwesomeIcon icon={faCircleLeft} size="xl" style={{ color: "white" }} /></button> ; <div className="carousel_track-container">; <button onClick={(e) => nextSlide(e)}className="carousel_button carousel_button--right" ref={nextBtnRef}><FontAwesomeIcon icon={faCircleRight} size="xl" style={{ color: "white" }} /></button> <div className="carousel_nav" ref={navDotsRef}> <button className="carousel_indicator current-slide"></button> {topMovies && Array.apply(0, Array(topMovies.length)).map(() => { return <button className="carousel_indicator"></button> })} </div> </div> ); }</pre> <p>我最初的想法是由于某种原因,更改className导致useEffect触发,因此我添加了带有isLoading条件的if语句。但这并没有起作用,所以我不认为bug来自于useEffect钩子。</p> <p>对此感到非常困惑,但这是我第一次使用Refs,所以完全有可能我错过了一些非常明显的东西。非常感谢您的帮助!</p>; {topMovies && topMovies.map((电影) => ( <li className="carousel_slide"> >
{电影.标题}
</li> ))} </ul>
P粉6424362822023-08-16 10:19:47
您正在混合使用React创建的DOM和使用纯Javascript操作的DOM。您不能这样做,这只会破坏DOM / VDOM关系。
如果您想避免将整个组件移动以按照React的方式工作,那么只需在空元素上使用Ref,好处是您可以获得组件挂载和卸载的好处。
然后,您几乎可以复制粘贴Javascript代码,只需将其全部放在useEffect
中即可。
例如:
下面我创建了两个按钮,一个完全由React控制,另一个由JS控制,当您点击它时,它只会切换pink-button
类。
我还放置了一个复选框来翻转按钮的顺序以引起重新渲染,以展示JS版本的状态没有被破坏,请确保在这样做时使用key
属性让React知道它是相同的组件。这里的主要观点是展示React现在将不再干预这个按钮,它现在完全由您负责。希望这能帮助您了解如何将React与纯JS混合使用。
const domContainer = document.querySelector('#mount'); const root = ReactDOM.createRoot(domContainer); const {createRef, useEffect, useState} = React; function JSButton() { const btnRef = createRef(); useEffect(() => { //do everything now from inside this useEffect const btn = btnRef.current; btn.innerText = 'This is a Javascript Button'; const doClick = () => btn.classList.toggle('pink-button'); btn.addEventListener('click', doClick); return () => { //we can also do any clean-up here btn.removeEventListner('click', doClick); } }, []); //only render the button component, //don't add any props, classes etc. //our JS will be handling it all. return <button ref={btnRef}/>; } function ReactButton() { const [pink, setPink] = useState(false); return <button onClick={() => setPink(p => !p)} className={pink ? 'pink-button' : ''}> React Button </button>; } function Test() { const [jsFirst, setJsFirst] = useState(false); return <React.Fragment> <input type="checkbox" checked={jsFirst} onChange={(e) => { setJsFirst(e.target.checked); }} />Js First {jsFirst ? <React.Fragment> <JSButton key={'js'}/> <ReactButton key={'r'}/> </React.Fragment> : <React.Fragment> <ReactButton key={'r'}/> <JSButton key={'js'}/> </React.Fragment> } </React.Fragment> } root.render(<Test/>);
.pink-button { background-color: pink; } button { display: block; width: 200px; margin: 1rem; }
<script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script> <div id="mount"></div>