Tengo un componente de preguntas frecuentes plegable personalizado que se basa en la altura del elemento cuando se expande y viceversa.
import { useState, useRef, useEffect } from "react"; export default FAQItem({title, description}: FAQItemProps) { const [isOpen, setIsOpen] = useState(false); const heightRef = useRef<HTMLDivElement>(null); const collapsible = () => (!isOpen ? setIsOpen(true) : setIsOpen(false)); useEffect(() => { !isOpen ? (heightRef.current!.style.height = "96px") : (heightRef.current!.style.height = `${offsetHeight}px`) }, [isOpen]); return( <div ref={heightRef}> <h2 onClick={collapsible}>{title}</h2> <p>{description}</p> </div> ) } Debido a que estoy tratando con TypeScript, algunas de las soluciones ya respondidas que pude encontrar lamentablemente no tienen ninguna respuesta relacionada con TypeScript y no funcionarán con TS y tuve que agregar definiciones de tipo. Y volvió con el error Cannot find name "offsetHeight". y clientHeight hace lo mismo.
Intenté agregar any a offsetHeight, que incluye:
declare const window: Window & typeof globalThis & { offsetHeight: number | any; }... y como era de esperar, el error desapareció pero no funcionó: la altura no cambió y no se expandirá.
Sin embargo, todas las soluciones que pude encontrar lamentablemente no tienen respuestas relacionadas con TypeScript con respecto a obtener el ancho o la altura de un elemento en un proyecto de React TypeScript; todas ellas son simplemente preguntas de React sin TypeScript, y prefiero no usar bibliotecas externas. de cualquier tipo tampoco.
La razón por la que recibe el error es porque no ha definido las variables offsetHeight y clientHeight . Ahora, sé que no necesita definirlas, pero debido a que su uso es incorrecto, el compilador cree que olvidó crear estas variables.
Esto es lo que desea: heightRef.current?.clientHeight y heightRef.current?.offsetHeight , el ? es solo para evitar errores en caso de que la ref no esté cargada.
import "./styles.css"; import React from "react"; export default function App() { const [isOpen, setIsOpen] = React.useState(false); const heightRef = React.useRef<HTMLDivElement>(null); const collapsible = () => setIsOpen(!isOpen); console.log(isOpen, heightRef.current?.style?.height); React.useLayoutEffect(() => { if (isOpen) { heightRef.current?.style.height = `${heightRef.current?.offsetHeight}px`; } else { heightRef.current?.style.height = "96px"; } }, [isOpen]); return ( <div className="App" ref={heightRef} style={{height: 1100}}> <h1 onClick={collapsible}>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> </div> ); }¡Acepte la respuesta si le ayuda! ¡Gracias!
Parece que aún no ha definido la variable offsetHeight haciendo referencia a ella aquí
(heightRef.current!.style.height = '${offsetHeight}px') es por eso que mecanografiado está gritando. Aunque no necesitamos definir esto, en lugar de eso, tome el valor haciendo esto heightRef.current.offsetHeight .
También en lugar de asignar así heightRef.current!.style.height = "96px" haz esto (heightRef.current?.style.height = "96px") . ¡Hasta donde yo sé, no existe tal operador !. en javascript.