0
242
VisualizaçõesReaccionar: obtener datos DOM de elementos hermanos
(Soy nuevo en React y TypeScript, así que me disculpo de antemano)
Estoy tratando de construir una barra que pueda llenar entre 2 elementos y creo que la mejor manera podría ser averiguar dónde están esos dos elementos después de construir el componente y luego hacer algo de lógica para dimensionar la barra correctamente.
Como referencia, aquí está lo que estoy tratando de construir: 
¿Cómo es posible obtener el DOM usando algo como getBoundingClientRect() para saber qué tan grande y dónde debe comenzar y detenerse la barra?
Aquí está el componente configurado hasta ahora:
import React from "react"; import './CardLineItem.css'; import CardLineItemImage from "./CardLineItemImage"; import { FaChevronRight } from 'react-icons/fa'; import CardLineItemProgressBar from "./CardLineItemProgressBar"; export default class CardLineItem extends React.Component { render() { return ( <div className="CardLineItem"> <CardLineItemImage cardUrl="platinum-card.png" altText="platinum-card"/> <FaChevronRight className="CardLineItemChevron" size="25%"/> <CardLineItemProgressBar /> </div> ) } } Busqué en componentDidMount y this.children.toArray pero eso nunca devuelve nada. ¿Sugerencias sobre la mejor manera de hacer esto? CardLineItemProgressBar es el elemento que necesito para ser flexible según el tamaño del navegador.
¡Gracias!
1 Respostas
Responde à pergunta0
En lugar de leer el tamaño y la posición de los otros elementos y hacer ajustes antes de que el DOM pinte, es mucho mejor para el rendimiento confiar en CSS para hacer algo como esto.
Recomiendo encarecidamente ver si flex o grid pueden cumplir con lo que está tratando de hacer aquí.
Al traer el componente de la barra de progreso entre los otros dos componentes en el árbol JSX de esta manera...
<div className="CardLineItem"> <CardLineItemImage cardUrl="platinum-card.png" altText="platinum-card"/> <CardLineItemProgressBar className="CardLineItemProgress" /> <FaChevronRight className="CardLineItemChevron" size="25%"/> </div> ... puede agregar el estilo flexible a .CardLineItem y una clase .CardLineItemProgress para que su barra de progreso crezca en consecuencia para llenar el espacio.
.CardLineItem { // ... your other styles display: flex; gap: 10px; } .CardLineItemProgress { flex-grow: 1; align-self: flex-end; } Dicho esto, si realmente prefiere agregar cálculos JS para calcular y establecer el tamaño manualmente, getSnapshotBeforeUpdate() debería ser lo que está buscando.
Y si alguna vez cambia a los componentes funcionales de React con ganchos (estandarizados después de React 16.8), entonces el gancho que estaría buscando es useLayoutEffect()