Javascript 在FullCalendar React中使用React引导弹出框

我在React with React bootstrap popover中使用FullCalendar库。我想在事件单击完整日历时显示popover。下面是我的eventclicked函数来显示popover

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;
};

EventDetail=（{event，el，view}）=>{
设divId='test_'+event.id；
常量内容=(
{event.t0}

{event._def.extendedProps.t1}
{event._def.extendedProps.t3}
)
ReactDOM.render（内容，el）；
返回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>
);

const popover=(
爆米花对吗
这里有一些精彩的内容，非常吸引人。
正确的？
);

单击事件时，将在div中生成aria descripeby=“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>

标题1
时间秀
活动详情

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

<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>

爆米花对吗
这里有一些精彩的内容。这很吸引人。正确的？

但它并没有出现在前面。当我执行inspect元素时，它显示如下图所示。popover内容在日历的后面呈现。我如何在这里显示它？这里出了什么问题？有什么想法吗

---

我还必须在fullcalendar中使用react bootstrap popover。这是我的密码

eventRender={（信息）=>{
常数popover=(
{info.event.title}
首席审计师：

);
让evtId=“事件-”+info.event.id；
常量内容=(
{info.event.title}
);
render（content，info.el）；
}}

---

我还必须在fullcalendar中使用react bootstrap popover。这是我的密码

eventRender={（信息）=>{
常数popover=(
{info.event.title}
首席审计师：

);
让evtId=“事件-”+info.event.id；
常量内容=(
{info.event.title}
);
render（content，info.el）；
}}

---

我也得到了同样的结果。它不会出现在生成的div中的日历前面，如果我添加“in”，则会显示在类中的“in”。在我的代码中，如果我添加

，我可以在生成的div中看到test

我添加了样式不透明度作为“1”，现在我可以看到poover，我得到了相同的结果。它不会出现在生成的div中的日历前面，如果我添加了显示的“in”，则类中的“in”。在我的代码中，如果我添加

，我可以在生成的div中看到test

我添加了样式不透明度作为“1”，现在我可以看到popover了