<p>Ich versuche, eine Karussellkomponente in meinem React-Projekt zu erstellen – ich versuche tatsächlich, eine vorhandene, in reinem JS geschriebene Karussellkomponente zu nutzen, indem ich Refs verwende, damit sie in React funktioniert, anstatt sie direkt im DOM zu ändern. Ich stoße auf ein Problem, wenn ich versuche, das Karussell zu initialisieren, indem ich die erste Folie in der Sequenz als aktuelle Folie markiere (mit Klassenname current-slide). Ich habe diese Aktion in einen useEffect-Hook eingefügt, wobei {topMovies} eine Abhängigkeit ist. {topMovies} ist ein Array von Objekten, die über prop an die Karussellkomponente übergeben werden. Wenn sich topMovies also ändert (d. h. lädt), sollte useEffect ausgeführt werden. Das funktioniert – nach dem Laden erhält die erste Folie im Karussell den Klassennamen „current-slide“. </p> <p>Der zweite Codeabschnitt (nextSlide und moveToSlide) ist jedoch der Anfang der Funktion, die die nächste Folie auswählt. Übergeben Sie die Track-Referenz (d. h. den Container aller Folien) an die Funktion, damit das untergeordnete Element mit dem Klassennamen „current-slide“ ausgewählt und sein Klassenname entfernt werden kann. Das funktioniert auch – aber nach einer kurzen Verzögerung (~1 Sekunde) erscheint der Klassenname „current-slide“ wieder.</p> <pre class="brush:php;toolbar:false;">const Carouselv2 = ({topMovies}) => { //Ref const trackRef = useRef(); const nextBtnRef = useRef(); const prevBtnRef = useRef(); const navDotsRef = useRef(); //Karussell beim Laden der Stütze initialisieren const [isLoading, setIsLoading] = useState(true); useEffect(() => { if (topMovies && setIsLoading) { const slides = Array.from(trackRef.current.children); slides[0].classList.add('current-slide'); //Erste Folie als sichtbar markieren const slideWidth = slides[0].getBoundingClientRect().width; const setSlidePosition = (slide, index) => { slide.style.left = slideWidth * index + 'px'; } slides.forEach(setSlidePosition); //Folien nebeneinander anordnen setIsLoading(false); } }, [Top Filme]); //Button-Funktionalität const moveToSlide = (currentSlide, targetSlide) => { //trackRef.current.style.transform = 'translateX(-' + targetSlide.style.left + ')'; currentSlide.classList.remove('current-slide'); //targetSlide.classList.add('current-slide'); } const updateDots = () => { } const responsiveBtns = () => { } const prevSlide = (e) => { } const nextSlide = (e) => { const currentSlide = trackRef.current.querySelector('.current-slide'); const nextSlide = trackRef.current.children.nextElementSibling; moveToSlide(currentSlide, nextSlide); } zurückkehren ( <div className="carousel"> <button className="carousel_button carousel_button--left" ref={prevBtnRef}><FontAwesomeIcon icon={faCircleLeft} size="xl" style={{ color: "white" }} /></button> ; <div className="carousel_track-container"> <ul className="carousel_track" ref={trackRef}> {topMovies && topMovies.map((movie) => ( <li className="carousel_slide"> <img src={movie.image} alt="" /> <h2>{movie.title}</h2> </li> ))} </ul> </div> <button onClick={(e) => nextSlide(e)}className="carousel_button carousel_button--right" ref={nextBtnRef}><FontAwesomeIcon icon={faCircleRight} size="xl" style={{ Farbe: „weiß“ }} /></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>Mein erster Gedanke war, dass die Änderung von className aus irgendeinem Grund dazu führte, dass useEffect ausgelöst wurde, also fügte ich eine if-Anweisung mit einer isLoading-Bedingung hinzu. Aber das hat nicht funktioniert, daher glaube ich nicht, dass der Fehler vom useEffect-Hook herrührt. </p> <p>Das verwirrt mich sehr, aber ich verwende Refs zum ersten Mal, daher ist es durchaus möglich, dass ich etwas sehr Offensichtliches übersehe. Ich danke Ihnen für Ihre Hilfe! </p>

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>