javascript - FullCalendar React 中的 React Bootstrap Popover

Question

我在React中使用FullCalendar库和react-bootstrap popover。我想在事件单击 FullCalendar 时显示弹出窗口。这是我的 eventclicked 函数来显示弹出窗口。

EventDetail = ({ event, el, view }) => {

    let divId = 'test_' + event.id;
    const content = (
        <OverlayTrigger trigger="click" placement="bottom" overlay={popover}>
            <div className="fc-content" id={divId}>
                <div className="fc-title">{event.t0}
                    <br /><span className="f300">{event._def.extendedProps.t1}</span>

                    <div className="f300 breakWrd" style={{ whiteSpace: "pre-wrap", wordBreak: 'break-word' }}>
                        {event._def.extendedProps.t3}
                    </div>
                </div>
            </div>
        </OverlayTrigger>

    )
    ReactDOM.render(content, el);
    return el;
};

“popover”组件定义如下，

const popover = (
    <Popover id="popover-basic">
        <Popover.Title as="h3">Popover right</Popover.Title>
        <Popover.Content>
            And here's some <strong>amazing</strong> content. It's very engaging.
            right?
    </Popover.Content>
    </Popover>
);

当我单击该事件时，div 中生成的 aria-scribedby="popover-basic"属性如下。

<div class="fc-content" id="test_1258045" aria-describedby="popover-basic">
  <div class="fc-title">Title1<br /><span class="f300">Time Show</span>
    <div class="f300 breakWrd" style="white-space: pre-wrap; word-break: break-word;">
      Event_Details
    </div>
  </div>
</div>

并且“popover”元素也在“body”元素下生成。

<div role="tooltip" x-placement="bottom" class="fade show popover bs-popover-bottom" id="popover-basic"
  style="position: absolute; top: 0px; left: 0px; right: auto; bottom: auto; transform: translate3d(945.5px, 277.5px, 0px);"
>
  <div class="arrow" style="position: absolute; left: 0px; transform: translate3d(179.5px, 0px, 0px);" ></div>
  <h3 class="popover-header">Popover right</h3>
  <div class="popover-body">
    And here's some <strong>amazing</strong> content. It's very engaging. right?
  </div>
</div>

但它没有出现在前面。当我执行检查元素时，它显示如下图。弹出窗口内容呈现在日历的后面。我怎样才能在这里显示它？这里出了什么问题？有什么想法吗？

Answer 1

我还必须将r​​eact-bootstrap popover与fullcalendar一起使用。这是我的代码

eventRender={(info) => {
  const popover = (
    <Popover id="popover-basic">
      <Popover.Title as="h3">{info.event.title}</Popover.Title>
      <Popover.Content>
        Lead Auditor: <br /> 

      </Popover.Content>
    </Popover>
  );

  let evtId = "event-" + info.event.id;
  const content = (
    <OverlayTrigger placement="bottom" overlay={popover}>
        <div className="fc-content" id={evtId}>
          <span className="fc-title">{info.event.title}</span>
        </div>
    </OverlayTrigger>
  );

  ReactDOM.render(content, info.el);
}}