Programmiererforum

Code: Select all

import { createRef, useEffect, useRef, useState } from 'react';
import Section from './Section';
import QuestionAnswer from './QuestionAnswer';

export default function FAQ(){
let [offsets, setOffsets] = useState({offset_width: null, offset_height: null});
let gridColRef = createRef();
let gridCol = useRef(gridColRef);

// we use useEffect as a didComponentMount, and didComponentUpdate
// as the dom won't be loaded initially and thus won't give us access
// to the gridCol element
useEffect(() => {
// everytime we resize the window unfortunately this addEventListener
// and all its statements run and
window.addEventListener("resize", () => {
console.log(offsets.offset_height, offsets.offset_width);
if(gridCol.current){
// console.log(gridCol.current.current)
let gridColWidth = gridCol.current.current.offsetWidth;
let gridColHeight = gridCol.current.current.offsetHeight;
setOffsets({offset_width: gridColWidth, offset_height: gridColHeight});
}
});

}, []);

return (

Frequently asked questions






}
< /code>
Dies ist mein React -Code, und im Grunde möchte ich schließlich den Offsets -Status mit Höhe und Breite dynamisch einstellen lassen, wenn die Komponenten basierend auf der Größenänderung des Fensters montiert und aktualisiert werden. Z.B. Wenn die Komponentenhalterungen die anfängliche Offsetwidth