Réduire l'accordéon React-Bootstrap de l'intérieur du composant Collapse de l'accordéon.

Question

Je tente de passer une fonction onClick décorée renvoyée par la fonction useAccordionToggle de react-bootstrap dans un composant afin de pouvoir masquer l'Accordion suite à une interaction sur ce composant. Quelque chose ne fonctionne pas et la fonction décorée créée n'est plus en mesure d'accéder correctement aux contextes que react-bootstrap met en place (elle semble coincer sur SelectableContext ici). Je suis assez nouveau en react, et je viens juste de découvrir les contextes en cherchant pourquoi cela ne fonctionne pas, je ne serais pas surpris si c'est là que vient ma confusion. Il semble ne pas obtenir le bon contexte au moment de la construction de la méthode.

J'ai inclus un petit test Cliquez ici pour voir un exemple:

import React from "react";
import ReactDOM from "react-dom";

import { Button, Accordion, Card, useAccordionToggle } from "react-bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

import "./styles.css";

const InternalComponent = props => {
  console.log(props.onClick);
  return (

       props.onClick()}>ici pour voir

  );
};

function App() {
  const x = useAccordionToggle(0, () => {
    /**/
  });
  return (

      <>

                créer un nouveau groupe

  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(, rootElement);

Answer 1

Je n'ai pas une réponse parfaite à cela, mais ce que j'ai fait pour moi-même était d'avoir le composant intérieur faire onclick={document.querySelector("yourtogglecomponent").click()} pour déclencher mon accordion.toggle valide à l'extérieur de l'accordeon.collapse. En théorie, vous pourriez avoir un accordion.toggle caché quelque part et faire la même chose.