如何在ReactJs中单击购物车图标后显示购物车模式

我正在创建购物车，我已经成功添加了产品，但我不知道当我点击导航栏上的购物车图标时如何显示购物车模式

这是我的标题，包含徽标、菜单和购物车图标，它位于

组件/标题中

const Header = ({ basketNumber }) => {
 
  return (
    <Container>
      <Navbar expand="lg">
        <Navbar.Collapse className="nav-menu">
          <Nav>
            <Nav.Link href="/cart">
              <Image src={CartIcon} alt="Cart icon"/>
              {!!basketNumber && basketNumber > 0 && (
                <span className="basket-number">{basketNumber}</span>
              )}
            </Nav.Link>
          </Nav>
        </Navbar.Collapse>
      </Navbar>
    </Container>
  );
};


export default Header;

正如您在上面的购物车模式中看到的我的代码，我添加了一个按钮来显示购物车模式，但现在我想切换到标题中的购物车图标

我该怎么做？

---

请帮我解决这个问题，谢谢你不用这个按钮

<BootstrapButton variant="primary" onClick={handleShow}>
   Launch demo modal
</BootstrapButton>

启动演示模式

你可以在这里使用图标

<YourIcon onClick={handleShow} />

哪个组件包括这两个组件？我指的是它们的父组件。我知道，但我的模态和标题组件在不同的文件夹中，你可以看到我的问题详细信息，抱歉误解。你可以使用Ref，比如你例子中的这个，如果我想使用React钩子呢？

<YourIcon onClick={handleShow} />