javascript - React Bootstrap Collapse 任何时候只有一个项目折叠？

Question

如何转换下面的代码以便调用

<div><Example/></div>
<div><Example/></div>
<div><Example/></div>

当我单击一个 Example 项目然后单击另一个项目时，之前打开的 Example 项目关闭了吗？目前，该项目只有在被点击时才会关闭，如果我点击另一个项目将保持打开状态。

function Example() {
  const [open, setOpen] = useState(false);
    
  return (
    <>
      <Button
        onClick={() => setOpen(!open)}
        aria-controls="example-collapse-text"
        aria-expanded={open}
        className="Collapse-Test"
        data-open={open}
      >
        click
      </Button>
      <Collapse in={open}>
        <div id="example-collapse-text">
          Hidden Text
        </div>
      </Collapse>
    </>
  );
};

Answer 1

将状态提升到父组件，以便它可以控制当前选择和打开的内容。更新 Example 组件以获取 open 和 onClick Prop 。

示例组件

interface IExample {
  open: boolean;
  onClick: () => void;
}

function Example({ open, onClick }: IExample) {
  return (
    <>
      <Button
        onClick={onClick}
        aria-controls="example-collapse-text"
        aria-expanded={open}
        className="Collapse-Test"
        data-open={open}
      >
        click
      </Button>
      <Collapse in={open}>
        <div id="example-collapse-text">
          Hidden Text
        </div>
      </Collapse>
    </>
  );
};

父组件

const [openId, setOpenId] = useState<number | null>(null);

const toggleHandler = (id: number) => () => {
  // toggle closed if already open, otherwise set new open id
  setOpenId(openId => openId === id ? null : id);
};

...

<div>
  <Example open={openId === 1} onClick={toggleHandler(1)} />
</div>
<div>
  <Example open={openId === 2} onClick={toggleHandler(2)} />
</div>
<div>
  <Example open={openId === 3} onClick={toggleHandler(3)} />
</div>