Question

我有一个每周日历，可以在这里使用react-big-calendar。在此库中，有一个名为onSelectEvent的动作，当我单击一个事件时，它会重现一个动作。但是，当我单击该组件执行操作时，它指出了错误。

在图书馆自己的文档中，它因此使用onSelectEvent = {event => alert (event.title)} 因此，当我切换到onSelectEvent = {event => modal()}或onSelectEvent = {modal()}时，它可以完美地工作他指出了这个错误：

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

我的代码：

import Modal from "../modal";

return (
  <div>
    <Calendar
      events={events}
      localizer={localizer}
      defaultView={Views.WEEK}
      defaultDate={new Date(programming[0].schedules[0].initial_date)}
      onSelectEvent={event => Modal()}
      views={{ month: true, week: MyWeek }}
      toolbar={false}
      style={{ height: "70vw", paddingTop: 35 }}
    />
  </div>
);

代码模式：

return (
  <div>
    <Button id="Popover1" type="button">
      Launch Popover
    </Button>
    <Popover
      placement="bottom"
      isOpen={popoverOpen}
      target="Popover1"
      toggle={toggle}
    >
      <PopoverHeader>Popover Title</PopoverHeader>
      <PopoverBody>
        Sed posuere consectetur est at lobortis. Aenean eu leo quam.
        Pellentesque ornare sem lacinia quam venenatis vestibulum.
      </PopoverBody>
    </Popover>
  </div>
);

Answer 1

由于Modal是组件，因此无法将其称为函数。相反，您需要渲染它。要渲染模式，您可以保持一个状态，该状态设置为知道何时触发它

import Modal from "../modal";
const [isOpen, setIsOpen] = useState(false);
return (
  <div>
    {isOpen && <Modal /> }
    <Calendar
      events={events}
      localizer={localizer}
      defaultView={Views.WEEK}
      defaultDate={new Date(programming[0].schedules[0].initial_date)}
      onSelectEvent={event => setIsOpen(true)}
      views={{ month: true, week: MyWeek }}
      toolbar={false}
      style={{ height: "70vw", paddingTop: 35 }}
    />
  </div>
);

要关闭模式，您需要将状态设置为false。

×错误：无效的挂钩调用。挂钩只能在功能组件的主体内部调用

1 个答案: