React Popover 未关闭答案

【问题标题】：React Popover not closingReact Popover 未关闭
【发布时间】：2021-02-03 08:58:51
【问题描述】：

我是 React 新手，正在尝试使用弹出框构建一个简单的页面（页面有 n 个部分，每个弹出框都有不同的内容，请参阅 projectContent 数组）。我有 3 个问题必须与从父母传递给孩子的数据有关：

点击退出时弹出框不会关闭。我尝试了 rootClose 和 trigger="focus" 之类的解决方案，但它不起作用。
关闭按钮不起作用。

我在控制台中收到一条错误消息，告诉我 Overlay Trigger 组件创建了一个我无法访问的 ref。我真的不需要参考，因为弹出框会全屏显示。

  import React, { Component } from "react";
  import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
  import Popover from 'react-bootstrap/Popover';
  import Button from 'react-bootstrap/Button';

  const projectContent = [{id:1,title:'project-1',type:'html'},{id:2,title:'project-2',type:'motion'}]

  const PopoverComponent = ({myData}) => {
   return (
    <Popover title="Popover bottom">
       <Popover.Title as="h3">Popover right</Popover.Title>
       <Popover.Content>
          {myData.title}
          {myData.type}
          <Button key={myData.id} onClick={() => document.body.click()} >Close</Button>
       </Popover.Content>
    </Popover>
   )
}

 class Home extends Component {
  render() {
   return (
    <div>
      <h2>List of projects</h2>
      {projectContent.map((item, index) => {
        return(

          <OverlayTrigger key={index} rootClose trigger="click" overlay={<PopoverComponent myData={item} />}>
            <button variant="success">{item.title}</button>
          </OverlayTrigger>

        )
      })}
     </div>
  );
 }
}

export default Home;

【问题讨论】：

标签： reactjs

【解决方案1】：

您的OverlayTrigger 需要将引用传递给您的PopoverComponent，但PopoverComponent 不接受引用，要解决此问题，您可以使用forwardRef 函数包装您的PopoverComponent 并将该引用分配给根Popover:

const PopoverComponent = React.forwardRef(({ myData }, ref) => {
  return (
    <Popover title="Popover bottom" ref={ref}>
      <Popover.Title as="h3">Popover right</Popover.Title>
      <Popover.Content>
        {myData.title}
        {myData.type}
        <Button key={myData.id} onClick={() => document.body.click()}>
          Close
        </Button>
      </Popover.Content>
    </Popover>
  );
});

【讨论】：