【React】Refのメモ

業務でDOMを取得する際に使用したのでメモ。

div要素を取得してみる

import { useEffect, useRef } from "react";

const Component = () => {
    const ref = useRef(null);

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

    return (
        <div ref={ref}>hello</div>
    );
};

export default Component;

コンソールの結果は

Console

<div>hello</div>

ためしにdivの小要素を取得してみる

import { useEffect, useRef } from "react";

const Component = () => {
    const ref = useRef(null);

    useEffect(() => {
        let child = ref.current?.children;
        console.log(child);
    }, []);

    return (
        <div ref={ref}>
          <h2>タイトル01</h2>
          <p>テキスト</p>
          <h2>タイトル02</h2>
          <p>テキスト</p>
        </div>
    );
};

export default Component;

コンソールの結果は

Console

HTMLCollection {0: HTMLHeadingElement, 1: HTMLParagraphElement, 2: HTMLHeadingElement, 3: HTMLParagraphElement, length: 4…}
0: <h2>タイトル01</h2>
1: <p>テキスト</p>
2: <h2>タイトル02</h2>
3: <p>テキスト</p>

ためしにdivの小要素を取得して配列にしてみる

import { useEffect, useRef } from "react";

const Component = () => {
    const ref = useRef(null);

    useEffect(() => {
        let child = ref.current?.children;
        let elms = [].slice.call(child)
        console.log(elms);
    }, []);

    return (
        <div ref={ref}>
          <h2>タイトル01</h2>
          <p>テキスト</p>
          <h2>タイトル02</h2>
          <p>テキスト</p>
        </div>
    );
};

export default Component;

コンソールの結果は

Console

(4) [HTMLHeadingElement, HTMLParagraphElement, HTMLHeadingElement, HTMLParagraphElement]
0: <h2>タイトル01</h2>
1: <p>テキスト</p>
2: <h2>タイトル02</h2>
3: <p>テキスト</p>

最後の方は何してるのって感じですね。
公式ではRefを使いすぎるなと書いてあるので気をつけます。