홈페이지의 모바일 버전을 만들려고 하는데 중첩된 아코디언 "항목"에 처음 열었을 때 하단 항목 섹션의 높이가 정확하게 표시되지 않는 버그가 있는 것 같습니다.
열려면 먼저 프로젝트 텍스트를 클릭하세요. 그러면 프로젝트 목록이 표시되고, 프로젝트를 클릭하면 프로젝트 카드가 전환됩니다.
(업데이트됨) 부모 아코디언이 자식 아코디언을 열 때 높이를 다시 업데이트하지 않기 때문에 이런 일이 발생한다고 생각합니다.
좋은 방법을 알고 있나요? 아니면 필요한 경우 이를 가능하게 하는 방식으로 구성 요소를 재구성해야 합니까? 어려운 점은 아코디언이 아이들을 수용한다는 점인데, 그 안에 아코디언을 재사용하고 있어서 꽤 헷갈립니다. 콜백 함수를 사용하여 부모를 트리거할 수 있다는 것을 알고 있지만 이에 대해 어떻게 해야 할지 잘 모르겠습니다.
홈.tsx
으아악portfolio.tsx
으아악AccordionGroup.tsx - AccordionGroup의 목적은 한 번에 하나의 하위 Accordion만 열 수 있도록 하는 것입니다. 아코디언이 AccordionGroup에 속하지 않은 경우 독립적으로 열고 닫을 수 있습니다.
으아악accordion.tsx
으아악프로젝트카드.tsx
으아악어떤 도움이라도 대단히 감사하겠습니다. 감사합니다!
P粉9981006482024-02-22 10:41:59
TL;DR: 상위 아코디언은 그에 따라 높이를 조정할 수 있도록 이러한 변경 사항을 알아야 합니다.
Amin A. Rezapour의 "amiut/accordionifyCreating Lightweight React Accordions"을 통해 표시된 대로 을 사용하고 계실 것 같습니다.
이것은
를 사용하는 유일한 프로젝트입니다. AccordionGroup
이는
Portfolio.tsx로 설명할 수 있습니다. 여기서 구성 요소에는 를 기반으로 생성된 여러 배열이 포함되어 있습니다. 다음 Accordion 구성 요소 항목아코디언 구성 요소는 언급된 "하위" 아코디언입니다. Portfolio.tsx 来说明，其中 AccordionGroup 组件包含多个基于 创建的 数组。这些 Accordion 组件项目Accordion
으아악
. Accordion 都包含一个显示项目详细信息的ProjectCard。当用户单击Accordion（或“项目”）时，它会展开以显示ProjectCard
여기서 높이 변경이 적용됩니다. 아코디언은 사용자 상호 작용에 따라 확장되거나 축소되어 높이가 동적으로 변경됩니다.
에서 관리됩니다: Accordion.tsx
으아악
). 그렇다면 높이는 "0px"로 설정됩니다(즉, 아코디언이 축소됨). 열리지 않은 경우 높이는 콘텐츠의 스크롤 높이로 설정됩니다(즉, 아코디언이 확장됨). handleToggle函数时，它会检查手风琴当前是否打开（isOpen
저도 같은 곳에서 봤어요
: Accordion.tsx
으아악
(접이식 아코디언) 기준입니다. isActive 属性设置的，它表示手风琴当前是否打开。如果打开，则高度设置为手风琴内容的滚动高度（有效展开手风琴），如果未激活，则高度设置为 0px
상태에 따라 각 아코디언의 높이를 올바르게 조정하지만 하위 아코디언 높이의 변화는 고려하지 않습니다. isActive
재계산되지 않으므로 상위 하위 항목의 새 높이에 맞게 조정되지 않습니다.
즉, 자식 아코디언의 높이가 변경되면 부모 아코디언은 다시 렌더링하고 높이를 조정해야 한다는 사실을 모릅니다. 중첩된 아코디언이 확장되거나 축소될 때 다시 렌더링되지 않으면 상위 아코디언이 올바른 높이를 표시하지 않게 됩니다.TL;DR: 해결책은 부모가 자식 아코디언의 높이 변화를 인식하여 그에 따라 자체 높이를 조정할 수 있도록 하는 것입니다.
(“React: Force 구성 요소 다시 렌더링에 언급된 기술 중 하나 | 4가지 쉬운 방법 ” 작성자: Josip Miskovic)
귀하의 Accordion 组件可以受益于回调函数 prop，该函数在其高度发生变化时被调用，例如 onHeightChange。然后，在 Portfolio 组件中，您可以通过将新的回调函数传递给 Accordion 组件来将此高度更改向上传播到 Homepage 组件，利用 onHeightChange 부동산.
手风琴.tsx：
그런 다음 포트폴리오 구성 요소를 수정하여 높이 변경 이벤트를 전파하세요.
으아아아마지막으로, 높이 변경 이벤트가 실행될 때 변경되는 홈 페이지의 포트폴리오 아코디언에 키를 추가할 수 있습니다. 이렇게 하면 아코디언이 다시 렌더링됩니다.
으아아아이렇게 하면 하위 Accordion의 높이가 변경될 때마다 상위 Accordion 구성 요소가 강제로 다시 렌더링됩니다.
P粉6499902732024-02-22 10:08:40
아시다시피 여기서 구현은 약간 까다롭습니다. 왜냐하면 하위 아코디언에서 조부모 아코디언의 높이를 업데이트하려는 경우 props를 전달하지 않는 한 업데이트하려는 해당 조부모 아코디언을 실제로 알 수 없기 때문입니다. 상위 아코디언을 생성하고 props를 중간 구성 요소(예: Portfolio, 하위 아코디언의 상위 구성 요소)에 전달하여 하위 아코디언에 전파할 수 있도록 합니다.
이렇게 하면 조부모와 아이들이 어떤 방식으로든 아코디언을 통해 소통할 수 있습니다.
이것이 최선의 해결책은 아닐 수도 있지만, 안타깝게도 더 나은 해결책이 생각나지 않습니다.
요약하자면, 각 부모 아코디언의 높이에 대한 참조를 유지하기 위해 최상위 수준에서 상태를 생성하는 것이 아이디어이므로 길이가 "수동으로" 설정되는 배열이므로 다소 보기 흉해집니다. 구성요소를 동적으로 표시하기 위해 데이터 배열을 사용해야 한다면 이는 문제가 되지 않습니다. 나중에 알게 되겠지만 해결 방법의 제한 사항도 살펴보겠습니다.
이제 질문에 포함된 내용에 적합한 가장 간단하고 간단한 수정 방법을 찾아보겠습니다.
위에서 언급했듯이 먼저 HomePage 구성 요소에 상태를 만듭니다.
으아아아최상위 수준에서 배열 상태를 생성한 후 이제 각 아코디언 구성 요소에 상태 설정 기능을 전달합니다. setHeights、索引 indexx 以及相应的height heightParent 상위 아코디언인 경우
참고: 부모 indexx 属性和传递给中间组件（Portfolio）的 indexx에 전달된 속성은 실제로 솔루션의 핵심인 해당 인덱스를 나타내는 동일한 값 을 가져야 합니다.
나중에 충돌을 피하기 위해 두 개의 "x"를 포함하여 이름을 "indexx"로 지정합니다.
그런 다음 수신된 소품을 중간 구성 요소의 하위 아코디언에 전달합니다.
으아아아이제 하위 Accordion 구성 요소에서 전달된 indexx 속성을 활용하여 HomePage 상태에서 해당 Accordion 상위 항목의 높이를 업데이트할 수 있으므로 하위 높이를 업데이트하면 상위 높이도 업데이트됩니다.
마지막으로 아코디언의 높이를 지정할 때 속성이 설정된 방식을 heightParent 作为 props，以便我们知道它是父级，这样，我们让 Accordion 组件使用 heightParent 作为 maxHeight 而不是它自己的状态 height（如果它是父状态），这就是忽略更新 height 状态的原因当它是打开的父 Accordion 时，因此，我们必须更改 maxHeight 수신하는지 확인할 수 있습니다. 이제 이는 아코디언의 특성에 따라 달라집니다.
상위 아코디언을 원한다면 해당 상태를 사용하고 height 作为 maxHeight 코드를 동일하게 유지하는 것이 더 합리적입니다
아코디언 구성 요소에 useEffect 并确保其仅在更新并定义接收到的 heightParent 属性时运行来执行此操作，我们这样做确保代码仅在父手风琴应更新其 height 상태를 추가하여 계속 실행할 수 있습니다.
위에서 언급했듯이 이것이 더 의미가 있고 가장 예쁘기도 하지만, 저는 여전히 첫 번째 것이 더 간단하고 추가 렌더링을 절약하기 때문에 선호합니다.
데이터를 배열에 저장하고 이를 기반으로 구성 요소를 표시하려면 다음과 같이 할 수 있습니다.
으아아아 상위 아코디언에 key，以便我们可以使用它而不是indexx，但您知道key > 속성을 지정해야 하며 어쨌거나 이를 어지럽히고 싶지 않다는 점을 알 수 있습니다. 이해하시기 바랍니다
분명히 이 해결 방법은 한 수준에서만 작동하므로 하위 아코디언 자체가 하위 아코디언이 되면 다시 둘러싸야 합니다. 하지만 수행 중인 작업을 내가 이해하면 아마도 이 문제에 직면하지 않을 것입니다. 하위 아코디언은 항목을 표시해야 하지만 언젠가 다른 하위 아코디언을 반환해야 할 수도 있다는 것을 누가 알겠습니까? 그렇기 때문에 제 제안은 해결 방법이지 최선의 해결책은 아니라고 생각합니다.
내가 말했듯이 이것이 최선의 솔루션은 아닐 수도 있지만 솔직히 말해서 특히 이 구현의 경우 내 생각에는 그런 다단계 작업 솔루션이 존재하지 않는 것 같습니다. 제가 틀렸다는 것을 증명해 주세요. 나는 게시물을 팔로우하고 있습니다. .