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节点的方法
###相信下面这个答案是题主想要的。
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...
###使用 useRef 的 hook
我还没使用过hooks,但搜索引擎一下就能找到结果呢: react hook ref
###import React, { useRef, useEffect } from 'react';
function HooksComponent(){
const divRef = useRef(null);
useEffect(() => {
console.log(divRef.current);
}, [])
return <div ref={divRef}>hello world</div>
}