React вложенный Accordion Parent не обновляет высоту

Вы знаете, что для обработки таких ситуаций первая идея, которая приходит на ум, состоит в том, чтобы поднять состояние или, по крайней мере, использовать контекст, но с этой реализацией, использующей дочерние реквизиты, это немного сложно, потому что, когда вы хотите обновить высоту прародительского аккордеона по сравнению с дочерним, вы не сможете узнать оттуда, какой соответствующий прародительский аккордеон вы хотите обновить, если не передадите реквизиты, чтобы помочь в достижении этого.

Одно из решений, которое я могу придумать, - это создать состояние на домашней странице для хранения текущей высоты каждого родительского аккордеона.

const [heights, setHeights] = useState(Array(7).fill("0px"));

Здесь я указал длину для того же количества родительских аккордеонов на домашней странице, но даже если это массив, который вы сопоставляете для возврата аккордеонов, вы можете инициализировать состояние с помощью метода .map.

Каждому Аккордеону вы передаете функцию установки состояния setHeights, индекс indexx, а также соответствующую высоту heightParent, если это родительский Аккордеон.

<AccordionGroup>
  <Accordion title = "Puyan Wei" heightParent = {heights[0]} setHeights = {setHeights} indexx = "0">
      <PuyanWei setHeights = {setHeights} indexx = "0" />
  </Accordion>
  <Accordion title = "Puyan Wei" heightParent = {heights[1]} setHeights = {setHeights} indexx = "1">
      <Portfolio setHeights = {setHeights} indexx = "1" />
  </Accordion>
  //...
  <Accordion title = "Puyan Wei" heightParent = {heights[6]} setHeights = {setHeights} indexx = "6">
      <Socials setHeights = {setHeights} indexx = "6" />
  </Accordion> 
</AccordionGroup>

Затем вы передаете их еще на один уровень вниз к Аккордеону:

export function Portfolio({
  className = "",
  testId = "portfolio",
  indexx,
  setHeight,
}: PortfolioProps) {
  // update props interface
  return (
    <AccordionGroup className = {`overflow-hidden ${className}`} testId = {testId}>
      {projects.map((project, index) => (
        <Accordion
          title = {project.title}
          key = {`${index}-${project}`}
          headingSize = "h2"
          indexx = {indexx}
          setHeight = {setHeight}
        >
          <ProjectCard project = {project} />
        </Accordion>
      ))}
    </AccordionGroup>
  );
}

Теперь из вашего дочернего компонента Accordion вы можете обновить высоту соответствующего родителя Accordion в состоянии HomePage, используя преимущества переданных реквизитов indexx, поэтому, когда мы обновляем дочернюю высоту, мы также обновляем родительскую высоту.

function handleToggle() {
  if (!contentHeight?.current) return;
  setIsOpen((prevState) => !prevState);
  let newHeight = isOpen ? "0px" : `${contentHeight.current.scrollHeight}px`;
  if (!heightParent) { // there is no need to update the state when it is a parent Accordion
    setHeight(newHeight);
  }
  setHeights((prev) =>
    prev.map((h, index) => (index == indexx ? newHeight : h))
  );
}

Наконец, когда вы указываете высоту для одного аккордеона, вы можете проверить, получает ли он heightParent в качестве реквизита, чтобы мы знали, что он является родительским:

style = {{ maxHeight: `${heightParent? heightParent : height }` }}

Анализ проблемы:

TL;DR: родительский аккордеон должен знать об этих изменениях, чтобы он мог соответствующим образом отрегулировать свою высоту.

Я предполагаю, что вы можете использовать amiut/accordionify , как показано в « Create Lightweight React Accordions » от Amin A. Rezapour.
Это единственное, что я нахожу с использованием AccordionGroup.

Вложенная структура аккордеона в вашем приложении включает отношения родитель-потомок, где высота дочернего аккордеона динамически изменяется в зависимости от того, развернут он или свернут.

Это иллюстрируется вашим Portfolio.tsx, где компонент AccordionGroup содержит несколько компонентов Accordion, созданных на основе массива projects. Эти Accordion компоненты являются упомянутыми «дочерними» аккордеонами:

export function Portfolio({ className = "", testId = "portfolio" }: PortfolioProps) {
  return (
    <AccordionGroup className = {`overflow-hidden ${className}`} testId = {testId}>
      {projects.map((project, index) => (
        <Accordion title = {project.title} key = {`${index}-${project}`} headingSize = "h2">
          <ProjectCard project = {project} />
        </Accordion>
      ))}
    </AccordionGroup>
  )
}

Каждый дочерний элемент Accordion содержит элемент ProjectCard, отображающий детали проекта. Когда пользователь нажимает на Accordion (или «проект»), он расширяется, чтобы показать ProjectCard.
Именно здесь в игру вступает изменение высоты; аккордеон будет расширяться или сворачиваться в зависимости от взаимодействия с пользователем, динамически изменяя свою высоту.

Динамическая высота управляется в Accordion.tsx:

  function handleToggle() {
    if (!contentHeight?.current) return
    setIsOpen((prevState) => !prevState)
    setHeight(isOpen ? "0px" : `${contentHeight.current.scrollHeight}px`)
    if (onClick) onClick()
  }

Когда вызывается функция handleToggle, она проверяет, открыт ли в данный момент аккордеон (isOpen). Если это так, высота устанавливается на "0px" (т. е. аккордеон сворачивается). Если он не открыт, высота устанавливается равной высоте прокрутки содержимого (т. е. аккордеон расширяется).

Динамическое изменение высоты этих дочерних аккордеонов является ключевой частью проблемы, с которой вы столкнулись. Родительский аккордеон должен знать об этих изменениях, чтобы он мог соответствующим образом отрегулировать свою высоту.

Я вижу там же Accordion.tsx:

  useEffect(() => {
    if (isActive === undefined) return
    isActive ? setHeight(`${contentHeight.current?.scrollHeight}px`) : setHeight("0px")
  }, [isActive])

Высота аккордеона задается на основе реквизита isActive, который показывает, открыт ли аккордеон в данный момент или нет. Если он открыт, высота устанавливается равной высоте прокрутки содержимого аккордеона (фактически расширяя аккордеон), а если он не активен, высота устанавливается на 0px (сворачивание аккордеона).

Однако, хотя этот эффект правильно регулирует высоту каждого аккордеона в зависимости от его собственного состояния isActive, он не учитывает изменения высоты дочерних аккордеонов.

Когда вложенный (дочерний) аккордеон изменяет свою высоту (из-за расширения или свертывания), высота родительского аккордеона не пересчитывается и, следовательно, не подстраивается под новую высоту дочернего элемента.

Другими словами, родительский аккордеон не знает, что ему нужно повторно отображать и регулировать свою высоту при изменении высоты дочернего аккордеона. Это отсутствие повторного рендеринга, когда вложенный аккордеон расширяется или сворачивается, приводит к тому, что родительский аккордеон не показывает правильную высоту.

Возможное решение

TL;DR: решение будет заключаться в том, чтобы родитель знал об изменениях высоты в дочернем аккордеоне, чтобы он мог соответствующим образом отрегулировать свою высоту.

(одна из техник, упомянутых в «React: Force Component to Re-Render | 4 Simple Ways », от Josip Miskovic)

Ваш компонент Accordion может извлечь выгоду из поддержки функции обратного вызова, которая вызывается при изменении его высоты, например onHeightChange. Затем в вашем компоненте Portfolio вы можете распространить это изменение высоты вверх на компонент Homepage, передав новую функцию обратного вызова компоненту Accordion, который использует свойство onHeightChange.

Accordion.tsx:

export interface AccordionProps extends Component {
  title: string
  children: ReactNode
  isActive?: boolean
  onClick?: () => void
  onHeightChange?: () => void
  headingSize?: "h1" | "h2"
}

export function Accordion({
  className = "",
  title,
  children,
  isActive,
  onClick,
  onHeightChange,
  headingSize = "h1",
  testId = "Accordion",
}: AccordionProps) {
  // ...

  useEffect(() => {
    if (isActive === undefined) return
    isActive ? setHeight(`${contentHeight.current?.scrollHeight}px`) : setHeight("0px")
    if (onHeightChange) onHeightChange() // Call the onHeightChange callback
  }, [isActive])

  // ...
}

Затем измените компонент «Портфолио», чтобы распространить событие изменения высоты:

export function Portfolio({ className = "", testId = "portfolio", onHeightChange }: PortfolioProps & {onHeightChange?: () => void}) {
  return (
    <AccordionGroup className = {`overflow-hidden ${className}`} testId = {testId}>
      {projects.map((project, index) => (
        <Accordion 
          title = {project.title} 
          key = {`${index}-${project}`} 
          headingSize = "h2"
          onHeightChange = {onHeightChange} // Propagate the height change event
        >
          <ProjectCard project = {project} />
        </Accordion>
      ))}
    </AccordionGroup>
  )
}

Наконец, вы можете добавить ключ к аккордеону вашего портфолио на главной странице, который будет меняться при срабатывании события изменения высоты. Это приведет к повторному рендерингу аккордеона:

export function Homepage({ className = "", testId = "homepage" }: HomepageProps) {
  const [key, setKey] = useState(Math.random());
  //...

  return (
    //...
    <Accordion className = "lg:hidden" title = "Portfolio" key = {key}>
      <Portfolio onHeightChange = {() => setKey(Math.random())} />
    </Accordion>
    //...
  )
}

Таким образом, вы принудительно выполняете повторную визуализацию родительского компонента Accordion всякий раз, когда изменяется высота дочернего компонента Accordion.