bootstrap React 折叠多

Question

我是新来的反应。我有一个带有可折叠链接（嵌套）的侧边栏。如果我为它们中的每一个编写函数，这将是一大堆代码，并且还会变得复杂。有没有办法使用 'this' 来管理所有具有 1 个功能的东西？（不使用手风琴）

function Example() {
  const [open, setOpen] = useState(false);

  return (
<>
  <Button
    onClick={() => setOpen(!open)}
    aria-controls="example-collapse-text"
    aria-expanded={open}
  >
    click
  </Button>
  <Collapse in={open}>
    <div id="example-collapse-text">
      Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus
      terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer
      labore wes anderson cred nesciunt sapiente ea proident.
    </div>
  </Collapse>
</>
  );
}

render(<Example />);

Answer 1

这里的基本思想是让一个对象作为状态，属性名称与 link name/id 相同，属性值为布尔值：

{
    1: false,
    2: false,
    3: false
}

然后您可以编写一个回调函数，它以 link name/id 作为参数并调用 onClick:

const handleClick = (navId) =>
    setNavState((prev) => {
      return { ...prev, [navId]: !prev[navId] };
    });

在你的 link 然后：

onClick={() => handleClick(nav.id)}

我还设置了一个带有工作示例的沙箱：https://codesandbox.io/s/react-bootstrap-template-forked-2mhh3j

bootstrap React 折叠多

bootstrap React Collapse Multi

react-bootstrap