可以翻译为：如何在React-Bootstrap Accordion组件中折叠Accordion.Collapse子组件？

Question

我正在尝试将从react-bootstrap useAccordionToggle函数返回的装饰过的onClick函数传递到组件中，以便我可以通过该组件上的交互隐藏Accordion。但是出现了问题，创建的装饰函数无法正确访问react-bootstrap设置的上下文（似乎在SelectableContext here上出现问题）。我对React还比较陌生，在研究为什么不起作用时才了解上下文，如果我的困惑来自那里，我也不会感到惊讶。它似乎没有在方法构建时获取正确的上下文。

我已经包含了一个小型测试案例点击此处查看fiddle：

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 (
    <div>
      <button onClick={() => props.onClick()}>here for seeing</button>
    </div>
  );
};

function App() {
  const x = useAccordionToggle(0, () => {
    /**/
  });
  return (
    <div className="App">
      <>
        <Accordion>
          <Card>
            <Card.Header>
              <Accordion.Toggle as={Button} variant="link" eventKey="0">
                create new group
              </Accordion.Toggle>
            </Card.Header>
            <Accordion.Collapse eventKey="0">
              <Card.Body>
                <InternalComponent onClick={x} />
              </Card.Body>
            </Accordion.Collapse>
          </Card>
        </Accordion>
      </>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

- Bryan Pedlar

Answer 1

你需要使用useRef hook来执行手风琴切换的click操作。

只需创建一个常量作为引用，将其应用于Accordion.Toggle，并从所需组件（在本例中为InternalComponent）的onClick中调用它即可。

import { useRef } from 'react';

function App() {
  const accordionRef = useRef(null);
  
   function toggleAccordion () {
     accordionRef.current.click();
   }

  return (
    <div className="App">
    ...
              <Accordion.Toggle ref={accordionRef} as={Button} variant="link" eventKey="0">
               ...
              <Card.Body>
                <InternalComponent onClick={toggleAccordion} />
              </Card.Body>
              ...

- Fernando Gurgel

Answer 2

我对此没有一个很好的答案，但是我自己为此所做的是让内部组件执行onclick={document.querySelector("yourtogglecomponent").click()}以触发我的有效手风琴展开/折叠，而不是在手风琴折叠中。理论上你可以在某个地方放置一个隐藏的手风琴展开/折叠并执行相同的操作。

- Christopher Johnson