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

我的应用程序中有一个简单的SVG，现在处于悬停状态，我想在完整的日历API中将这个div动态地附加到某个元素

更新：这是我的完整组件

---

我的代码有什么问题？

我不知道您想做什么，也不知道为什么需要“事件渲染”，但它是一个组件

改变DOM（如附加子对象）是一种反模式

const-App=（）=>{
const[isRender，toggle]=useReducer（p=>！p，false）；
返回(
{isRender&&}
呈现SVG
);
};

---

我不知道您想做什么，也不知道为什么需要“事件渲染”，但它是一个组件

改变DOM（如附加子对象）是一种反模式

const-App=（）=>{
const[isRender，toggle]=useReducer（p=>！p，false）；
返回(
{isRender&&}
呈现SVG
);
};

---

这似乎不是一种声明方式。您能否更详细地阐述一下用例，比如svg需要在哪个组件中显示？@DennisVash我该怎么做？请制作一个可生成的示例，向我们展示您想要附加到谁，以及如何调用

eventRender

，最好制作一个CodeSandbox，如果您已经拥有该组件，为什么不有条件地呈现它？@DennisVash它只是一个div，我想附加到日历事件中，我正在使用完整的日历API，如果我使用创建元素并附加它，它工作得很好，但是svg包含很多其他东西，这就是为什么我不想使用创建元素的原因，我只是将它添加到dom中，并将其附加到我的事件中。这似乎不是一种声明方式。您能否更详细地阐述一下用例，比如svg需要在哪个组件中显示？@DennisVash我该怎么做？请制作一个可生成的示例，向我们展示您想要附加到谁，以及如何调用

eventRender

，最好制作一个CodeSandbox，如果您已经拥有该组件，为什么不有条件地呈现它？@DennisVash它只是一个div，我想附加到日历事件中，我正在使用完整的日历API，如果我使用创建元素并附加它，它工作得很好，但是svg包含很多其他东西，这就是为什么我不想使用创建元素的原因，我只是将它添加到dom中并将其附加到我的事件中。谢谢，丹尼斯，我已经更新了我的组件签出谢谢，丹尼斯，我已经更新了我的组件签出

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#holiday@group.v.calendar.google.com',
                  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();
                  },
        eventRender: function(info){
                      console.log(info.el);
                      var imageData = document.getElementById('imageDataContaainer')

                    console.log(imageData)

                    info.el.appendChild(imageData);
                  },
            }));        
        }
    }, [calendarRef.current]);

    console.log(calendar);

    return (
        <>
           <CalendarBackgroundWrapper>
                <img style={imagestyle} src={calendartopbg} />
         </CalendarBackgroundWrapper>

            <CalendarContainer ref={calendarRef}>
                {calendar && calendar.render ? calendar.render(): null}
            </CalendarContainer>
        <div id="imageDataContaainer">
            <svg  xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
                <defs>
                    <mask id="image-mask">
                        <circle id="outer" cx="50" cy="50" r="50" fill="white"/>
                        <circle id="inner" cx="50" cy="50" r="25"/>
                    </mask>
                </defs>
            </svg>
        </div>

        </>
    )
}

export default Calendar;

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)

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

  return (
    <>
      {isRender && <SVGComponent />}
      <button onClick={toggle}>Render SVG</button>
    </>
  );
};