单击 react-big-calendar 中的事件后显示弹出窗口

Question

我创建了Event ()它作为自定义组件传递给的函数<Calendar components = {{   event: Event}}/>然后在Event ()函数中创建变量popoverClickRootClose，在其中放置 react-bootstrap popover。然后popoverClickRootClose传递给组件：<OverlayTrigger overlay = {popoverClickRootClose}>     <div> {event.title}</ div></ OverlayTrigger>单击事件后不会出现弹出窗口。有人可以告诉我我做错了什么吗？演示在这里：https : //stackblitz.com/edit/react-umtvgsimport 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    };  }

Answer 1

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

您已经包含了多个 bootstrap css 版本（bootstrap 4 和 3）并且react-bootstrap软件包版本0.32运行良好，仅适用于bootstrap 3

4.3.1从 html 中删除bootstrap引用，因为它与您使用的 react-bootstrap 包不兼容。

改变..

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

    />

我已经添加了有效的 stackblitz 链接作为评论。