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にクローズされました