Tengo un componente principal que repite un componente SVG secundario genérico en la pantalla.
Para hacerlo, el componente principal necesita conocer las dimensiones del niño.
Solía almacenarlos en los componentes secundarios de esta manera (sé que es inusual pero funcionó)
function Child() { return <path id="child" /> } Child.width = 100 Child.height = 80Y luego solía leerlos en mi componente principal de esta manera
function Parent(props) { let width = props.children.type.width let height = props.children.type.height return Array.from(Array(props.times), (e, i) => { return <Transform key={i} x={width*i} y={height*i}> {props.children} </Transform> }) }Lo que quiero es que el Contenedor principal calcule las dimensiones del elemento secundario por sí mismo para que no sean estáticos.
Sé que necesito acceder al dom del niño con una referencia como esta
function Parent(props) { const test = React.useCallback(node => { if (node !== null) { const box = node.getBBox() console.log(box) //this works var width = box.width //this works too late var height = box.height } }, []); return Array.from(Array(props.times), (e, i) => { return <Transform key={i} x={width*i} y={height*i}> <g ref={test}> {props.children}</g> </Transform> }) }Pero como me hubiera imaginado, React no espera mi devolución de llamada para ejecutar el resto del código, por lo que dice que el ancho y el alto no están definidos.
¿Cómo puedo obtener el ancho y alto del primer elemento una vez y luego dejar que el componente principal haga su trabajo? ¿Quizás con suspenso? Cualquier ayuda es realmente apreciada gracias!
Entonces, la solución fue actualizar el estado del componente dentro de useEffect para que nuestra vista se actualice cuando haya datos disponibles:
function Parent(props) { const [height, setHeight] = React.useState() const [width, setWidth] = React.useState() const test = React.useCallback(node => { if (node !== null) { const box = node.getBBox() setWidth(box.width) setHeight(box.height) } }, []); return Array.from(Array(props.times), (e, i) => { return <Transform key={i} x={width*i} y={height*i}> <g ref={test}> {props.children}</g> </Transform> }) }En primer lugar, puede usar svg como imagen de fondo a través de la URL y colocar la repetición y el tamaño del fondo. Pero si quieres este enfoque aquí vamos. Hay muchas formas de lograr este efecto con forwardRef/refs. El código debajo es lo primero que me vino a la mente. Le sugiero que tenga svg como componente jsx/tsx file/react; de esta manera, de lo contrario, deberá proporcionar parentRef en las dependencias de layoutEffect
import React, { useLayoutEffect, useRef } from 'react'; import logo from './logo.svg'; import './App.css'; import Logo from './Logo'; const Parent1: React.FC = ({ children }) => { const parentRef = useRef<HTMLDivElement | null>(null); useLayoutEffect(() => { parentRef.current?.childNodes.forEach((node: any) => console.log({ height: node?.clientHeight, width: node?.clientWidth }), ); }, []); return ( <div className='parent1' ref={parentRef}> {children} </div> ); }; function App() { return ( <div className='App'> <Parent1> {Array(Math.ceil(Math.random() * 25 + 10)) /** If you will decide to go img way - you need to place parentRef as a dependancy for the layoutEffect .fill(() => <img src={logo} alt='' />) */ .fill(Logo) .map((E, i) => { return <E key={i} />; })} </Parent1> </div> ); }