En el div de la Sección 1, si está activo, se mostrará el contenido; de lo contrario, no. El problema en el div de la Sección 2, cuando hago clic en él, se muestra activo pero no muestra el contenido.
Archivo App.js
const App = () => { return ( <div> <Accordition title={`Section 1`}> <p> Lorem ipsum 1 dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </Accordition> <Accordition title={`Section 2`}> <p> Lorem ipsum 2 dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p> </Accordition> </div> ); }; export default App;Componentes de archivo/Accordition.js
const Accordition = ({ title, children }) => { const [isActive, setisActive] = useState(false); const toggleCollapseContent = () => { setisActive(!isActive); }; useEffect(() => { let panelContent = document.querySelector(".content"); window.addEventListener("resize", function () { if (isActive) { panelContent.style.maxHeight = panelContent.scrollHeight + "px"; } else { panelContent.style.maxHeight = null; } }); }, [isActive]); useEffect(() => { let panelContent = document.querySelector(".content"); return () => window.removeEventListener("resize", function () { if (isActive) { panelContent.style.maxHeight = panelContent.scrollHeight + "px"; } else { panelContent.style.maxHeight = null; } }); }); useEffect(() => { let panelContent = document.querySelector(".content"); if (isActive) { panelContent.style.maxHeight = panelContent.scrollHeight + "px"; } else { panelContent.style.maxHeight = null; } }); return ( <div className="lp-collapsible-content"> <div className={`title ${isActive ? "active" : ""}`} onClick={toggleCollapseContent} > {title} </div> <div className="content">{children}</div> </div> ); }; export default Accordition;O vea: https://codesandbox.io/s/demoaccordion-otkoo
Gracias a todos
Debe especificar una id en cada elemento de acordeón. De lo contrario, cuando recupere la sección de contenido de esta manera: document.querySelector(".content") , solo recuperará el primer div con la clase de content y esa es siempre la Sección 1.
Establezca una id única en cada sección, pásela como prop al componente Accordion y configúrela en <div className="lp-collapsible-content" id={id}> . Entonces podrá obtener el contenido de una sección específica como esta:
document.querySelector(`#${id} .content`)Aquí hay una versión refactorizada de su ejemplo
Primero, verifique sus dos useEffect sin la lista de dependencias, esto causa un problema de rendimiento.
En segundo lugar, puede representar el contenido de forma condicional para evitar manipular style.maxHeight, etc.
{isActive && <div className="content">{children}</div>}su animación funcionará bien si la hay.
document.querySelector(".content");el querySelector es global y devuelve el primer nodo encontrado con la clase '.content' en su caso, y puede ser por eso que el segundo no se muestra cuando está activo.
Debe proporcionar una identificación para cada componente <Accordition> :
<Accordition title={`Section 1`} id='section-1'>Y en Accordition.js use getElementById:
import React, { useEffect, useState } from "react"; const Accordition = ({ title, children, id }) => { const [isActive, setisActive] = useState(false); const toggleCollapseContent = () => { setisActive(!isActive); }; useEffect(() => { let panelContent = document.getElementById(id); window.addEventListener("resize", function () { if (isActive) { panelContent.style.maxHeight = panelContent.scrollHeight + "px"; } else { panelContent.style.maxHeight = null; } }); }, [isActive,id]); useEffect(() => { let panelContent = document.getElementById(id); return () => window.removeEventListener("resize", function () { if (isActive) { panelContent.style.maxHeight = panelContent.scrollHeight + "px"; } else { panelContent.style.maxHeight = null; } }); }); useEffect(() => { let panelContent = document.getElementById(id); if (isActive) { panelContent.style.maxHeight = panelContent.scrollHeight + "px"; } else { panelContent.style.maxHeight = null; } }); return ( <div className="lp-collapsible-content"> <div className={`title ${isActive ? "active" : ""}`} onClick={toggleCollapseContent} > {title} </div> <div className="content" id={id}>{children}</div> </div> ); }; export default Accordition;Disfrutar