document.querySelector 在我的反應組件中不起作用

Question

function Slider() {
  const track=document.querySelector('.slide__track')//To access the div with class slide track
  console.log(track);
  return (
    <div className="slider">
      <i className="fas fa-chevron-left"></i>
      <div className="head">
        <h1 className="title">Based on your last search</h1>
        <h6>View more</h6>
      </div>
      <div className="slider_container">
        <ul className="slider__track">
          <li className="slider__items">
            <Card />
          </li>
        </ul>
      </div>
      <i className="fas fa-chevron-right"></i>
    </div>
  );
}

我無法使用 class slide__track 訪問 div。 這里有什么問題？ 或者我如何訪問該元素？

Answer 1

我認為這是因為它在 DOM 渲染之前運行。 將軌道代碼移動到 useEffect 中。

import {useEffect} from "react";

function Slider() {

  useEffect(() => {
    const track=document.querySelector('.slide__track')//To access the div with class slide track
    console.log(track);
  });

  return (
    <div className="slider">
      <i className="fas fa-chevron-left"></i>
      <div className="head">
        <h1 className="title">Based on your last search</h1>
        <h6>View more</h6>
      </div>
      <div className="slider_container">
        <ul className="slider__track">
          <li className="slider__items">
            <Card />
          </li>
        </ul>
      </div>
      <i className="fas fa-chevron-right"></i>
    </div>
  );
}

Answer 2

您可能應該使用 ref 來訪問 react 中的 dom 元素。 請參閱文檔： https://reactjs.org/docs/refs-and-the-dom.html - 原因是，如果您在循環中有以下內容，或者在頁面上有多個實例，您需要更多小心選擇器方法。

import React, { useRef, useEffect } from 'react';

function Slider() {


  const slideTrackRef = useRef(null);

  useEffect(() => {
    if (slideTrackRef && slideTrackRef.current) {
      console.log(slideTrackRef.current);
    }
  }, [slideTrackRef]);

  return (
    <div className="slider">
      <i className="fas fa-chevron-left" />
      <div className="head">
        <h1 className="title">Based on your last search</h1>
        <h6>View more</h6>
      </div>
      <div className="slider_container">
        <ul className="slider__track" ref={slideTrackRef}>
          <li className="slider__items">
            <p>tst</p>
          </li>
        </ul>
      </div>
      <i className="fas fa-chevron-right" />
    </div>
  );
}

export default Slider;

Answer 3

嘗試在 useEffect() 中使用此代碼

useEffect(() => {
    const track = document.querySelector('.slide__track')
    // have access to it
}, []);