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

这就是我试图使用

reactstrap

实现的目标

我遵循这个示例将其集成到我的代码中但单击后弹出窗口未显示如下所示

就我而言，我有一个

链接

，而没有

按钮

：

相关代码如下：

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;

从“reactstrap”导入{Popover，PopoOverder，PopoOverbody}；
类侧栏扩展了React.Component{
状态={
船舶：[]
};
异步组件didmount（）{
let response=wait Client.getEntries({
内容类型：“卡片”
});
const ships=response.items.map（item=>{
常数{
//常数。。。。。
}=项目字段；
返回{
//常数。。。。。
};
});
这是我的国家({
船舶
});
}
getFilteredShips=（）=>{
//运营。。。。。
};
PopoverItem=props=>{
常量{id，item}=props；
const[PopoOverOpen，setPopoOverOpen]=useState（false）；
常量切换=（）=>SetPopoOverOpen（！PopoOverOpen）；
};
render（）{
返回(
{this.props.activeShipTypes}
{this.getFilteredShips（）.map（ship=>(
{ship.name}
流行歌曲标题
塞德·波苏尔在洛博蒂斯举行了一次献身仪式
佩伦茨克酒店
前庭。
))}
);
}
}
导出默认边栏；

此代码

为帮助我解决问题而咨询的帖子，不幸的是没有成功：

1） 理解逻辑很有用，但与我试图实现的目标无关

2） 当然，这是最重要的，也是我试图复制这个例子的地方

感谢您为解决此问题指明了正确的方向