ペイントした後のダイナミックdivの幅を取得したいのですが、方法がわかりません。これは私がしていることです：
const ref=useRef();
useEffect(()=>{
console.log('REF',ref.current.offSetWidth)
},[])
return (
<div ref={ref}>
</div>window.resize eventListenerを試しましたが、画面のサイズが変更された場合にのみトリガーされます。私の質問は、それが画面にレンダリングされた後にdivの幅を取得する方法はありますか？事前に幅を設定していません。フレックスボックス内の親要素を100％使用しているだけです。
ResizeObserverを使用できます。Reactを使用した単純な実装は次のようになります。
import {useRef, useEffect} from 'react'
export default function App() {
const divRef = useRef()
useEffect(() => {
new ResizeObserver(() => {
console.log('Width: ', divRef.current.clientWidth)
}).observe(divRef.current)
}, [])
return (
<div ref={divRef}>
</div>
);
}
この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加