使用 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 = () => {&nbsp; const [isRender, toggle] = useReducer(p => !p, false);&nbsp; return (&nbsp; &nbsp; <>&nbsp; &nbsp; &nbsp; {isRender && <SVGComponent />}&nbsp; &nbsp; &nbsp; <button onClick={toggle}>Render SVG</button>&nbsp; &nbsp; </>&nbsp; );};