Intento establecer el color de fondo del nodo principal de esta manera, pero no funciona, ¿por qué?
<div onLoad="this.parentNode.style.background = 'yellow';" >Encontré aquí la inspiración: https://www.w3schools.com/jsref/prop_node_parentnode.asp
El desafío principal aquí es este: hacer que el div posicionado absoluto expanda la altura del div principal
Tengo un div principal con posición relativa y un div secundario con posición absoluta, y establecería la altura principal igual que la secundaria.
Esta publicación anterior dice que solo se puede hacer con Javascript, pero no hay pasos exactos para ello. ¿Ayudarías? Y tengo React encima.
Pensé que si puedo establecer el color, también podré establecer la altura. Establecer el color parecía un poco más fácil en el primer turno.
¿Por qué no usas el gancho useRef para obtener la referencia del nodo?
const node = useRef(null); ... <div ref={node} onLoad={() => { node.current.parentNode.style.background = 'yellow'; }} />A menos que haya una muy buena razón para acceder al div directamente, o como referencia, ¿por qué no usar accesorios?
Editar: he incluido un ejemplo de cómo usar useRef para establecer la altura principal usando la altura calculada del niño.
import React, { useState, useEffect, useRef } from "react"; const ParentComponent = () => { const [height, setHeight] = useState(null) const node = useRef(null) return ( <div style={{ ...(height ? { height: `${height}px` } : {}), backgroundColor: 'yellow', position: 'relative' }} > <MyComponent setHeight={setHeight} node={node} /> </div> ) } const MyComponent = ({ setHeight, node }) => { useEffect(() => { const childHeight = node.current ? node.current.offsetHeight : 0 setHeight(childHeight), [node.current] }) // sample parent updates when child updates const [content, setContent] = useState(['child']) useEffect( () => setTimeout(() => setContent([...content, 'child']), 1000), [content] ) return ( <div style={{ position: 'absolute', top: 0, left: 0 }} ref={node}> {content.map((item, i) => ( <div key={i}>{item + i}</div> ))} </div> ) }