使用reactstrap单击后如何正确显示弹出窗口

Question

这就是我试图使用reactstrap cards实现的目标。

我正在按照这个示例将其集成到我的代码中。 但单击后弹出窗口未显示如下。

在我的情况下，我有一个link而不是一个button：

相关代码如下：

import { Popover, PopoverHeader, PopoverBody } from "reactstrap";

class Sidebar extends React.Component {
  state = {
    ships: []
  };
  async componentDidMount() {
    let response = await Client.getEntries({
      content_type: "cards"
    });
    const ships = response.items.map(item => {
      const {
        // constants.....
      } = item.fields;
      return {
        // constants.....
      };
    });
    this.setState({
      ships
    });
  }

  getFilteredShips = () => {
    // operations .....
  };

  PopoverItem = props => {
    const { id, item } = props;
    const [popoverOpen, setPopoverOpen] = useState(false);
    const toggle = () => setPopoverOpen(!popoverOpen);
  };

  render() {
    return (
      <div className="map-sidebar">
        {this.props.activeShipTypes}
        <pre>
          {this.getFilteredShips().map(ship => (
            <Card className="mb-2">
              <CardImg />
              <CardBody>
                <CardTitle>
                  <h3 className="thick">{ship.name}</h3>
                </CardTitle>
                <Row style={{ marginTop: "20px" }}>
                  <div className="buttoncontainer">
                    <div className="btn btn-cards">
                      <a
                        className="buttonLink"
                        id={"Popover-" + id}
                        href={ship.projectnotes.fields.file.url}
                      >
                        Project Notes
                      </a>
                      <Popover
                        placement={item.placement}
                        isOpen={popoverOpen}
                        target={"Popover-" + id}
                        toggle={toggle}
                      >
                        <PopoverHeader>Popover Title</PopoverHeader>
                        <PopoverBody>
                          Sed posuere consectetur est at lobortis. Aenean eu leo
                          quam. Pellentesque ornare sem lacinia quam venenatis
                          vestibulum.
                        </PopoverBody>
                      </Popover>
                    </div>
                  </div>
                </Row>
              </CardBody>
            </Card>
          ))}
        </pre>
      </div>
    );
  }
}

export default Sidebar;

此代码

我咨询过以帮助解决问题的帖子，但不幸的是没有成功，这些帖子是：

1）this post对于理解逻辑很有用，但与我要实现的目标无关。

2）当然，this source是最重要的，也是我尝试从中复制示例的地方。

感谢您指出正确的方向来解决此问题。