Javascript 在大日历中单击事件后显示弹出窗口

我创建了

Event（）

函数，它作为自定义组件传递给

<Calendar components = {{
   event: Event
}}/>

在事件中单击后，不会出现弹出窗口。有人能告诉我我做错了什么吗

此处演示：

import React，{Component}来自'React'；
从'react dom'导入{render}；
从“react big Calendar”导入{Calendar，momentLocalizer}；
从“力矩”中导入力矩；
导入'react big calendar/lib/css/react big calendar.css'；
从'react bootstrap'导入{Overlay}；
从'react bootstrap'导入{OverlayTrigger}；
从'react bootstrap'导入{Popover}；
常数定位器=力矩定位器（力矩）；
函数事件（{Event}）{
让popoverClickRootClose=(
神圣的鳄梨酱！检查此信息。
{event.title}
);
console.log（事件）；
返回(
{event.title}
);
}
类应用程序扩展组件{
构造函数（）{
const now=新日期（）；
常量事件=[
{
id:0，
标题：“全天活动超长标题”，
全天：没错，
开始日期：新日期（2019年6月0日），
结束：新日期（2019年6月1日），
描述：'SDSDSDSD'
},
{
id:1，
标题：“长期活动”，
开始日期：新日期（2019年3月7日），
结束：新日期（2019年3月10日），
描述：“yyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyyy
},
{
id:2，
标题：“当前时间事件”，
开始：现在，
完:现在,，
描述：“CDDFFFFFFDFDFD”
},
]
此.state={
事件
};
}
render（）{
返回(
);
}
}
render（，document.getElementById（'root'））；

您发布的Javascript代码没有问题。这是一个CSS问题

您已经包含了多个引导css版本（bootstrap4和3），并且

react bootstrap

包版本是

0.32

，仅在bootstrap3

删除html中的引导

4.3.1

引用，因为它与您正在使用的react引导包不兼容

改变

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
  crossorigin="anonymous"
/>
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous"
/>

到

我添加了工作stackblitz链接作为评论

import React, { Component } from 'react';
import { render } from 'react-dom';
import { Calendar, momentLocalizer } from 'react-big-calendar';
import moment from 'moment';
import 'react-big-calendar/lib/css/react-big-calendar.css';
import {Overlay} from 'react-bootstrap';
import {OverlayTrigger} from 'react-bootstrap';
import {Popover} from 'react-bootstrap';

const localizer = momentLocalizer(moment);

function Event({ event }) {
  let popoverClickRootClose = (
    <Popover id="popover-trigger-click-root-close" style={{ zIndex: 10000 }}>
      <strong>Holy guacamole!</strong> Check this info.
      <strong>{event.title}</strong>
    </Popover>
  );

  console.log(event);
  return (
    <div>
      <div>
        <OverlayTrigger id="help" trigger="click" rootClose container={this} placement="bottom" overlay={popoverClickRootClose}>
          <div>{event.title}</div>
        </OverlayTrigger>
      </div>
    </div>
  );
}

class App extends Component {
  constructor() {
    const now = new Date();
    const events = [
      {
          id: 0,
          title: 'All Day Event very long title',
          allDay: true,
          start: new Date(2019, 6, 0),
          end: new Date(2019, 6, 1),
          description: 'sdsdsdsdsdsdsdsd'
      },
      {
          id: 1,
          title: 'Long Event',
          start: new Date(2019, 3, 7),
          end: new Date(2019, 3, 10),
          description: 'yyyyyyyyyyyyyyyyyy'
      },
      {
          id: 2,
          title: 'Right now Time Event',
          start: now,
          end: now,
          description: 'cddffffffffdfdfdfd'
      },
    ]
    this.state = {
      events
    };
  }

  render() {
    return (
        <div style={{ height: '500pt'}}>
          <Calendar
            events={this.state.events}
            startAccessor="start"
            endAccessor="end"
            defaultDate={moment().toDate()}
            localizer={localizer}
             components={{
              event: Event
            }}
          />
        </div>
    );
  }
}

render(<App />, document.getElementById('root'));

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
  integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
  crossorigin="anonymous"
/>
<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
  integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
  crossorigin="anonymous"
/>

<link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
      integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u"
      crossorigin="anonymous"
    />