Le parent accordéon imbriqué React ne met pas à jour la hauteur

Question

J'essaie de créer une version mobile de ma page d'accueil et il semble y avoir un bug avec mes "éléments" en accordéon imbriqués où ils n'affichent pas la hauteur correcte de la section inférieure des éléments lors de la première ouverture. Pour l'ouvrir, vous cliquez d'abord sur le texte du projet, puis il répertorie les projets, puis cliquez sur le projet pour basculer la fiche de projet. (Mise à jour) Je pense que cela se produit parce que mon accordéon parent ne met pas à jour sa hauteur lorsque l'accordéon enfant est ouvert. Connaissez-vous une bonne façon de procéder ? Ou si nécessaire, dois-je restructurer mes composants de manière à ce que cela soit possible ? La difficulté est qu'Accordéon accepte les enfants et

P粉998100648 · Answer

Analyse du problème :

TL;DR : L'accordéon parent doit être informé de ces changements afin de pouvoir ajuster sa hauteur en conséquence.

Je pense que vous utilisez peut-être amiut/accordionify comme indiqué via "Création d'accordéons React légers" de Amin A. Rezapour.
C'est le seul projet que j'ai trouvé qui utilise AccordionGroup.

La structure en accordéon imbriquée dans l'application implique une relation parent-enfant, dans laquelle la hauteur de l'accordéon enfant change de manière dynamique selon qu'il est agrandi ou réduit.

Cela peut être illustré par votre Portfolio.tsx, où le composant Portfolio.tsx 来说明，其中 AccordionGroup 组件包含多个基于 创建的 Accordion 组件项目 数组。这些 Accordion contient plusieurs tableaux Accordion éléments de composant créés sur la base de . Ces composants Accordéon sont les accordéons "enfants" mentionnés :

export function Portfolio({ className = "", testId = "portfolio" }: PortfolioProps) {
  return (
    
      {projects.map((project, index) => (
        
          
        
      ))}
    
  )
}

Chaque sousAccordion 都包含一个显示项目详细信息的ProjectCard。当用户单击Accordion（或“项目”）时，它会展开以显示ProjectCard.
C'est là que les changements de hauteur entrent en jeu ; l'accordéon se dilate ou s'effondre en fonction de l'interaction de l'utilisateur, modifiant ainsi sa hauteur de manière dynamique.

Les hauteurs dynamiques sont gérées en Accordion.tsx :

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

quand on l'appellehandleToggle函数时，它会检查手风琴当前是否打开（isOpen). Si c'est le cas, la hauteur est définie sur "0px" (c'est-à-dire l'accordéon replié). S'il n'est pas ouvert, la hauteur est définie sur la hauteur de défilement du contenu (c'est-à-dire que l'accordéon est développé).

Les changements dynamiques de hauteur de ces accordéons pour enfants sont un élément clé de votre problème. L'accordéon parent doit être informé de ces changements afin de pouvoir ajuster sa hauteur en conséquence.

J'ai vu dans le même Accordion.tsx :

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

La hauteur de l'accordéon est basée sur isActive 属性设置的，它表示手风琴当前是否打开。如果打开，则高度设置为手风琴内容的滚动高度（有效展开手风琴），如果未激活，则高度设置为 0px (accordéon pliant).

Cependant, bien que cet effet ajuste correctement la hauteur de chaque accordéon en fonction de son propre état isActive, il ne prend pas en compte les changements de hauteur des accordéons des enfants.

Lorsqu'un accordéon emboîté (enfant) change de hauteur (en raison d'une expansion ou d'un effondrement), la hauteur de l'accordéon parent n'est pas recalculée et ne s'ajuste donc pas pour s'adapter à la nouvelle taille des enfants du parent.

En d'autres termes, lorsque la hauteur de l'accordéon enfant change, l'accordéon parent ne sait pas qu'il doit restituer et ajuster sa hauteur. L'absence de rendu lorsqu'un accordéon imbriqué est développé ou réduit entraîne l'affichage de la hauteur correcte par l'accordéon parent.

Solutions possibles

TL;DR : La solution consiste à informer le parent des changements de hauteur de l'accordéon de l'enfant afin qu'il puisse ajuster sa propre hauteur en conséquence.

(« React : Une des techniques mentionnées dans le re-rendu des composants Force | 4 méthodes simples » par Josip Miskovic)

Vos Accordion 组件可以受益于回调函数 prop，该函数在其高度发生变化时被调用，例如 onHeightChange。然后，在 Portfolio 组件中，您可以通过将新的回调函数传递给 Accordion 组件来将此高度更改向上传播到 Homepage 组件，利用 onHeightChange propriétés.

手风琴.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])

  // ...
}

Modifiez ensuite votre composant Portfolio pour propager l'événement de changement de hauteur :

export function Portfolio({ className = "", testId = "portfolio", onHeightChange }: PortfolioProps & {onHeightChange?: () => void}) {
  return (
    
      {projects.map((project, index) => (
        
          
        
      ))}
    
  )
}

Enfin, vous pouvez ajouter une clé à l'accordéon Portfolio sur la page d'accueil qui changera lorsque l'événement de changement de hauteur sera déclenché. Cela entraînera un nouveau rendu de l'accordéon :

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

  return (
    //...
    
       setKey(Math.random())} />
    
    //...
  )
}

De cette façon, vous forcerez le composant Accordéon parent à être restitué chaque fois que la hauteur de l'Accordéon enfant change.

P粉649990273 · Answer

Vous savez, l'implémentation ici est un peu difficile car lorsque vous souhaitez mettre à jour la hauteur de l'accordéon d'un grand-parent à partir de son accordéon enfant, vous ne pouvez pas vraiment savoir à partir de là quel accordéon de grand-parent correspondant vous souhaitez mettre à jour à moins de transmettre les accessoires à l'accordéon grand-parent, et transmettre les accessoires à un composant intermédiaire (par exemple, Portfolio, le parent de l'accordéon enfant) afin qu'il puisse les propager à ses accordéons enfants.
En faisant cela, nous pouvons permettre aux grands-parents et aux enfants de communiquer en accordéon d'une manière ou d'une autre.
Ce n'est peut-être pas la meilleure solution que vous puissiez trouver, mais malheureusement, je ne trouve pas de meilleure solution.

Donc pour récapituler : l'idée est de créer un état au niveau supérieur pour contenir une référence à la hauteur de chaque accordéon parent, c'est donc un tableau dont la longueur est définie "manuellement", ce qui le rend un peu moche, mais si vous Si vous devez utiliser un tableau de données pour afficher votre composant de manière dynamique, ce n'est pas un problème, comme nous le découvrirons plus tard, nous verrons également les limites de la solution de contournement.

Solution :

Nous allons maintenant opter pour la solution la plus simple et la plus directe qui fonctionne pour ce qui est inclus dans la question.

Comme mentionné ci-dessus, nous créons d'abord l'état dans le composant HomePage :

const [heights, setHeights] = useState(Array(7).fill("0px")); // you have 7 parent Accordions

Après avoir créé l'état du tableau au niveau supérieur, nous transmettons maintenant la fonction de réglage de l'état à chaque composant Accordéon setHeights、索引 indexx 以及相应的height heightParent s'il s'agit d'un Accordéon parent

REMARQUE : Les indexx 属性和传递给中间组件（Portfolio）的 indexx propriétés transmises au parent doivent avoir la même valeur indiquant l'index correspondant, qui est en fait la clé de la solution.
Nommez-le "indexx" avec deux "x" pour éviter les conflits plus tard.

Ensuite, transmettez ces accessoires reçus du composant central à l'accordéon enfant :

export function Portfolio({
  className = "",
  testId = "portfolio",
  indexx,
  setHeight,
}: PortfolioProps) {
  // update props interface
  return (
    
      {projects.map((project, index) => (
        
          
        
      ))}
    
  );
}

Maintenant, à partir de votre composant Accordéon enfant, vous pouvez utiliser la propriété indexx transmise pour mettre à jour la hauteur du parent Accordéon correspondant dans l'état de la page d'accueil. Ainsi, lorsque nous mettons à jour la taille de l'enfant, nous mettons également à jour la hauteur du parent

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))
  );
}

Enfin, lorsque vous spécifiez la hauteur d'un accordéon, vous pouvez vérifier s'il reçoit la heightParent 作为 props，以便我们知道它是父级，这样，我们让 Accordion 组件使用 heightParent 作为 maxHeight 而不是它自己的状态 height（如果它是父状态），这就是忽略更新 height 状态的原因当它是打开的父 Accordion 时，因此，我们必须更改 maxHeight façon dont la propriété est définie, maintenant cela devrait dépendre de la nature de l'accordéon :

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

Si vous voulez que l'accordéon parent utilise simplement son état height 作为 maxHeight et garde le même code, cela a plus de sens

style={{ maxHeight: height }}

Vous pouvez toujours l'exécuter en ajoutant useEffect 并确保其仅在更新并定义接收到的 heightParent 属性时运行来执行此操作，我们这样做确保代码仅在父手风琴应更新其 height le statut dans le composant Accordéon :

useEffect(()=>{
 if(heightParent){
   setHeight(heightParent)
 }
},[heightParent])

Comme mentionné ci-dessus, celui-ci a plus de sens et est aussi le plus joli, mais je préfère quand même le premier car il est plus simple et économise également un rendu supplémentaire.

Traitement dynamique des données :

Si nous stockons des données dans un tableau et souhaitons afficher notre composant sur cette base, nous pouvons faire ceci :

const data = [...]
const [heights, setHeights] = useState(data.map(_ => "0px")); 
//...

 
  {data.map(element, index => {
     
       {element.for === "portfolio" ?  :  }  // just an example
     
  })
  }

Vous pouvez remarquer que nous devons spécifier une propriété key，以便我们可以使用它而不是indexx，但您知道key > dans l'accordéon parent et nous ne voulons pas nous en mêler de toute façon, j'espère que vous comprenez

Limites :

Évidemment, cette solution ne fonctionne que pour un seul niveau, donc si le sous-accordéon lui-même devient un sous-accordéon, vous devez l'enrouler à nouveau, mais si je comprends ce que vous faites, vous n'y serez probablement pas confronté, car avec votre implémentation l'accordéon enfant devrait montrer les éléments, mais qui sait, peut-être qu'un jour vous devrez lui faire rendre un autre accordéon enfant, c'est pourquoi je pense que ma suggestion est une solution de contournement et non la meilleure solution.

Comme je l'ai dit, ce n'est peut-être pas la meilleure solution, mais pour être honnête, surtout pour cette implémentation, Je ne pense pas qu'une telle solution de travail à plusieurs niveaux existe, s'il vous plaît, prouvez-moi le contraire, je suis le post .