我如何在反應中獲得querySelectorAllhtml元素？

我正在使用與功能組件反應。我也使用 react-bootstrap ，我附加了 react-bootstrap carousel ，react-bootstrap 一切都很好，對于某些功能，我想在 react 中獲得三個 div ， div 具有相同的類。我知道如果我使用簡單的 html css js 那么我很容易做到這一點，

querySelectorAll(".indicator-btn")

但我希望對此做出反應。我怎樣才能做到這一點？請為此建議我一個最佳實踐。

這是我的組件，最后我有三個我想要用于 Dom 的 div。

import React, { useState } from "react";
import Cardcarousel from "./Cardcarousel";
import { Carousel } from "react-bootstrap";
import Brand1img from "../images/brand1.png";
import Airbnbimg from "../images/Airbnb.png";
import Microsoft from "../images/microsoft.png";
import { Row, Col } from "react-bootstrap";

function Carouselx() {
  const [index, setIndex] = useState(0);

  const handleSelect = (selectedIndex, e) => {
    console.log(selectedIndex, "e=>", e);
    setIndex(selectedIndex);
  };

  const isSlide = (slide) => {
    console.log("slide no => "   slide);
    console.log(this);
  };

  return (
    <>
      <div className="px-5 py-3">
        <Carousel activeIndex={index} onSelect={handleSelect} onSlide={isSlide}>
          <Carousel.Item>
            <Row>
              <Col>
                <Cardcarousel
                  name="Technology UI/UX"
                  companylogo={Brand1img}
                  type="Full time job"
                />
              </Col>
              <Col>
                <Cardcarousel
                  name="Technology Backend developer"
                  companylogo={Airbnbimg}
                  type="Part time job"
                />
              </Col>
              <Col>
                <Cardcarousel
                  name="Technology Backend developer"
                  companylogo={Microsoft}
                  type="Internee"
                />
              </Col>
            </Row>
          </Carousel.Item>
          <Carousel.Item>
            <Row>
              <Col>
                <Cardcarousel
                  name="Technology UI/UX"
                  companylogo={Brand1img}
                  type="Full time job"
                />
              </Col>
              <Col>
                <Cardcarousel
                  name="Technology Backend developer"
                  companylogo={Airbnbimg}
                  type="Part time job"
                />
              </Col>
              <Col>
                <Cardcarousel
                  name="Technology front end developer"
                  companylogo={Microsoft}
                  type="Internee"
                />
              </Col>
            </Row>
          </Carousel.Item>
        </Carousel>
        <div className="carusel-indecator-container">
          <div className="indicator-btn indicator-btn1"></div>
          <div className="indicator-btn indicator-btn2"></div>
          <div className="indicator-btn indicator-btn3"></div>
        </div>
      </div>
    </>
  );
}

export default Carouselx;

uj5u.com熱心網友回復：

您可以使用useState它來獲取它的參考（也useRef可能會帶來更多的不便）。

const [btn1, setBtn1] = useState();
const [btn2, setBtn2] = useState();
const [btn3, setBtn3] = useState();

...

<div ref={setBtn1} className="indicator-btn indicator-btn1"></div>
<div ref={setBtn2} className="indicator-btn indicator-btn2"></div>
<div ref={setBtn3} className="indicator-btn indicator-btn3"></div>

在某些時候（第一次渲染之后），您將擁有 btn1、btn2、btn3 作為按鈕元素。如果你想使用它，假設是強制的，你可以使用 useEffect

useEffect(() => {
  if (!btn1 || !btn2 || !btn3) return;
  // do something with these refs i.e. make them jquery! $(btn1)
}, [btn1, btn2, btn3]);

標籤：javascript html 反应 dom 虚拟领域

上一篇：使用PySpark、Python或Shell決議多行CSV

下一篇：盡管顯示“ng-reflect-id”，但DOM中的Angular缺少id屬性