0
252
ViewsReaccionar Altura de actualización de acordeón cuando el DOM secundario tiene una nueva tabla para representar
Como puede ver en la imagen, tengo una página Foo, donde tengo 10 acordeones, en uno de los acordeones hay un componente de formulario, cuando envío el formulario, llama a una API remota y devuelve algunos datos JSON, lo convierto a una tabla de contenido y desea mostrarla en el formulario.
El problema es que puedo mostrar la tabla después de alternar el acordeón nuevamente después de hacer clic en el botón Enviar, ya que configuré la altura máxima en onClick.
const [activeState, setActiveState] = useState(""); const [activeHeight, setActiveHeight] = useState("0px"); const toogleActive = () => { setActiveState(activeState === "" ? "active" : ""); setActiveHeight(activeState === "active" ? "0px" :`${contentRef.current.scrollHeight}px`) } return ( <div className={styles.accordion_section}> <button className={styles.accordion} onClick={toogleActive}> <p className={styles.accordion_title}>{title}</p> </button> <div ref={contentRef} style={{ maxHeight: `${activeHeight}` }} className={styles.accordion_content}> <div> {content} </div> </div> </div> )También he usado el contexto para compartir el gancho useState entre los componentes Accordion y Form para actualizar la altura.
<UpdateHeightContext.Provider value={{updateHeight, setUpdateHeight}}> <Accordion title="Find your Data" content={< FormWithTwoInput firstLabel="FirstName" secondLabel="LastName" buttonColor="blue" buttonText="Check Deatils"/>} /> </UpdateHeightContext.Provider>¿Hay alguna forma de actualizar dinámicamente la altura de los acordeones cuando recibo la respuesta de la API? Aparte de cambiarlo de nuevo. Se hizo una pregunta similar aquí . Reaccionar acordeón, establecer altura dinámica cuando los niños de DOM cambian, lamentablemente nadie respondió.
1 answers
Answer question0
Aunque el trabajo en torno a lo que he encontrado no es sólido, funciona completamente bien para mí. Si alguien se topa con este mismo problema, podría encontrarlo útil.
import React, { useState, useRef } from 'react' const Accordion = ({ title, content }) => { const [activeState, setActiveState] = useState(""); const [activeHeight, setActiveHeight] = useState("0px"); const contentRef = useRef("form") const toogleActive = () => { setActiveState(activeState === "" ? "active" : ""); setActiveHeight(activeState === "active" ? "0px" :`${contentRef.current.scrollHeight + 100}px`) } return ( <div className={styles.accordion_section}> <button className={styles.accordion} onClick={toogleActive}> <p className={styles.accordion_title}>{title}</p> </button> <div ref={contentRef} style={{ maxHeight: `${activeHeight}` }} className={styles.accordion_content}> <div> {content} </div> </div> </div> ) } Accordion.propTypes = { title: PropTypes.string, content: PropTypes.object, } export default AccordionHe codificado un poco de espacio adicional para que, mientras se acepta la respuesta dinámica, se muestre el contenido de la tabla. En el archivo del módulo CSS, mantuve el desbordamiento como automático, antes estaba oculto.
.accordion_content { background-color: white; overflow: auto; max-height: max-content; }Como resultado, la tabla aparece dinámicamente y el usuario puede desplazarse dentro del acordeón si mi tabla necesita más espacio.