使用 eventRender 在完整日历 api 中附加子元素？

Question

我的应用程序中有一个简单的 SVG，现在悬停，我想将此 div 动态附加到完整日历 API 中的某个元素更新：这是我的完整组件import React, { useState, useEffect, useContext, useRef } from 'react';import { Calendar as FullCalendar } from '@fullcalendar/core';import googleCalendarPlugin from '@fullcalendar/google-calendar';import dayGridPlugin from '@fullcalendar/daygrid';import timeGridPlugin from '@fullcalendar/timegrid';import interactionPlugin from '@fullcalendar/interaction';import calendartopbg from 'assets/images/calendar_bg.png';import cloud from 'assets/images/calendar_chmurka.png';import styled from 'styled-components';const Calendar = () => {    const [calendar, setCalendar] = useState('');    const calendarRef = useRef('');    useEffect(() => {        if (calendarRef.current) {             console.log(FullCalendar);            setCalendar(new FullCalendar(calendarRef.current, {                plugins: [dayGridPlugin, timeGridPlugin, interactionPlugin, googleCalendarPlugin],                theme: false,                header: {                    left: 'prev,next today',                    center: 'title',                    right: 'dayGridMonth,listYear',                  },                    views: {                    day: {                      titleFormat: 'dddd, MMMM Do YYYY'                    }                  },                  googleCalendarApiKey: 'AIzaSyDcnW6WejpTOCffshGDDb4neIrXVUA1EAE',                  events: 'en.usa#[e-mail]',                  eventClick: function(arg) {                    // opens events in a popup window                    window.open(arg.event.url, '_blank', 'width=700,height=600');                    // prevents current tab from navigating                    arg.jsEvent.preventDefault();                  },在控制台上我可以看到这个 div ，然后出现以下错误app.js?1:121281 Uncaught TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.    at Calendar.eventRender (app.js?1:121281)我的代码有什么问题？

Answer 1

我不确定您要做什么以及为什么需要“事件渲染”，但“反应方式”是有条件地渲染组件。

改变 DOM（比如追加子节点）是一种反模式，因为它是 React 的责任。

const App = () => {

  const [isRender, toggle] = useReducer(p => !p, false);

  return (

    <>

      {isRender && <SVGComponent />}

      <button onClick={toggle}>Render SVG</button>

    </>

  );

};