Track div altura durante el renderizado de un array en React

Question

Estoy haciendo un libro usando datos json en reactjs. Estoy usando map() para establecer mis datos en el formato correcto. Todo el propósito de esta aplicación es generar un PDF que pueda ser impreso posteriormente. Quiero crear un pie de página después de cada página que muestre el número de página y la fecha. Necesito calcular exactamente cuánto espacio mi texto toma en cada página para que pueda aparecer en una div de pie después de alcanzar cierta altura. Aquí está el código actual sin un pie de página: {datedChats.map((group, j) => ( {group.date} {group.chats.map((chat, i) => ( {chat.message} ))} ))} Necesito calcular el offset Altura del padre div cada vez que el mapa() está en bucle, así que puedo mostrar el pie o el siguiente mensaje en su lugar. ¿Cómo pongo esa lógica aquí?

Gpt · Accepted Answer

Para calcular la altura de un div durante el renderizado en React y poder mostrar un pie de página o un mensaje en función de esa altura, puedes utilizar el concepto de "refs".

Aquí te muestro un ejemplo de cómo podrías implementarlo en tu código:

Define un estado para almacenar la altura de la div padre:

js
const [parentHeight, setParentHeight] = useState(0);

Crea una referencia utilizando useRef para el div padre:

js
const parentRef = useRef(null);

Asigna la referencia al div padre en el JSX:

js

Utiliza useEffect para calcular y actualizar la altura del div padre:

js
useEffect(() => {
  if (parentRef.current) {
    const height = parentRef.current.clientHeight;
    setParentHeight(height);
  }
}, [datedChats]);

Utiliza la altura calculada en tu lógica para mostrar el pie de página o el siguiente mensaje según tu necesidad.

Con estos pasos, podrás hacer un seguimiento de la altura de la div padre durante el renderizado en React y utilizar ese valor para mostrar el pie de página o cualquier otro contenido según sea necesario.

Respondida el Dec 19, 2020 a las 18:19 - por Gpt

Gemini · Answer

Para calcular la altura del div padre durante el renderizado del array en React y determinar si se necesita un pie de página, puedes seguir estos pasos:

Crea un ref para el div padre:


   const bookRef = useRef(null);

Usa el efecto useEffect para obtener la altura del div:


   useEffect(() => {
     const bookElement = bookRef.current;
     const bookHeight = bookElement.scrollHeight;
     // Aquí puedes calcular la altura necesaria para el pie de página y determinar si se necesita uno.
   }, []);

Agrega un div de pie de página condicional:


   {bookHeight > maxHeight ?  : null}

Ejemplo de código completo:


import React, { useEffect, useRef } from "react";

const Book = ({ dated Chats }) => {
  const bookRef = useRef(null);

  useEffect(() => {
    const bookElement = bookRef.current;
    const bookHeight = bookElement.scrollHeight;
    // Aquí puedes calcular la altura necesaria para el pie de página y determinar si se necesita uno.
  }, []);

  return (
    
      {dated Chats.map((group, j) => (
        
          {group.date}
          {group. chats.map((chat, i) => (
            
            {chat.message}
            
          ))}
        
      ))}
      {bookHeight > maxHeight ?  : null}
    
  );
};

export default Book;

En este ejemplo, maxHeight es la altura máxima permitida para el contenido antes de que se requiera un pie de página. Tendrás que ajustar este valor según el diseño de tu libro y la cantidad de texto que se muestra en cada página.

Respondida el Dec 19, 2020 a las 18:29 - por Gemini

Track div altura durante el renderizado de un array en React

2 Respuestas: