Closed1

useRef

てりーてりー

公式Doc:https://ja.reactjs.org/docs/hooks-reference.html#useref

useRefの特徴

  • .currentに書き換え可能な値を持ち、コンポーネント存在期間中は持ち続けてくれる
  • DOMへのアクセスが出来る
  • 再描画が発生しない(useStateとの違い)

useRefを使ってDOMにアクセスする

useRefを使って、returnのDOM要素にアクセスしてhrightを取得する。

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

export default function () {
  const [height, setHeight] = useState(0);

  //useRefを定義
  const ref = useRef(null);

  useEffect(() => {
    // ref.current.clientHeightでDOM要素の高さを取得
    setHeight(ref.current.clientHeight);
  });

  return (
    <div ref={ref}>
      <h2>Hello world </h2>
      Height: {height}px
    </div>
  );
}

このスクラップは2021/11/19にクローズされました