react使用hook，如何获取dom节点

Question

react小白，最近刚开始学习react。学习过程中使用hook时，不知道怎么获取dom节点，希望大佬能够指点一下
html：

    <div className={styles.main} ref={main}>
      <div className={styles.item}>1</div>
      <div className={styles.item}>2</div>
      <div className={styles.item}>3</div>
      <div className={styles.item}>4</div>
      <div className={styles.item}>5</div>
      <div className={styles.item}>6</div>
      <div className={styles.item}>7</div>
      <div className={styles.item}>8</div>
    </div>

JS：

  const main = useRef<HTMLDivElement | null>(null);
  useEffect(() => {
    if (main && main.current != null) {
      let childNodes = main.current.childNodes;
      if (childNodes && childNodes.length) {
        childNodes.forEach((val: any) => {
          console.log(val.getBoundingClientRect());
        });
      }
    }
  });

我自己通过查阅文档，找到了这种方式能够获得item元素的节点。但是我觉得这种方法很不讨巧。想知道有没有直接能够通过document.querySelectorAll('.item')来获取到dom节点的方法

Answer 1

相信下面这个答案是题主想要的。
hooks+document.querySelectorAll()方式。

import React, { useState, useEffect } from "react";

export default function App() {
  const [stylesItem, setStylesItem] = useState("");
  // 相当于componentDidMount
  useEffect(() => {
    setStylesItem("foo");
  }, []);
  // 相当于vue中的watch:stylesItem
  useEffect(() => {
    if (stylesItem) {
      const items = document.querySelectorAll(`.${stylesItem}`);
      items.forEach((val) => {
        console.log(val);
      });
    }
  }, [stylesItem]);
  return (
    <div className="App">
      <div className={stylesItem}>1</div>
      <div className={stylesItem}>2</div>
      <div className={stylesItem}>3</div>
      <div className={stylesItem}>4</div>
      <div className={stylesItem}>5</div>
      <div className={stylesItem}>6</div>
      <div className={stylesItem}>7</div>
      <div className={stylesItem}>8</div>
    </div>
  );
}

在线demo看这里：https://codesandbox.io/s/hook...

Answer 2

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

function HooksComponent(){ 
const divRef = useRef(null);

useEffect(() => {
    console.log(divRef.current);
}, [])

return <div ref={divRef}>hello world</div>
}

Answer 3

使用 useRef 的 hook

我还没使用过hooks，但搜索引擎一下就能找到结果呢: react hook ref