html - FullCalendar - React - 加载功能问题

Question

我正在将 FullCalander v5 用于 React，测试资源时间线 View 。
我遇到了“加载”功能的问题，目的是检查 Fullcalendar 状态，如果加载状态为真，则显示 Spinner 类型组件(带有条件渲染)而不是时间轴，设置 Spinner 组件状态使用 useState 为 true。问题在于，从渲染方法内部的 Fullcalendar 组件启动 useState 会启动无限渲染循环。任何打破流程的想法？

 
 // Loading function in the container component of Fullcalendar an the useState method
 
 const [spinner, setSpinner] = useState(true);
 
 let loadingFunction = (isLoading) => {
   if (isLoading) {
     console.log("loading");
  
  setSpinner(true);
} else {
    console.log("idle");
     
setSpinner(false);
   }
 };


//  The conditional render

return (
    <>
      {spinner ? (
        <Spinner />
      ) : (
        <>
          
         <FullCalendar
         loading={loadingFunction}
         ref={calendarRef}        
         dateClick={handleEventCreate}         
         .....
         
         

Answer 1

进去一样。
我的解决方案，(hack？)如下。
与其让状态变量控制微调器的渲染，不如添加一个将其移出屏幕的 css 类。
然后我引用了微调器，在 FullCalendar 的加载阶段，我调用了一个删除屏幕外类的方法，然后在加载阶段结束时再次添加它。

    /**
    * @type {{current: HTMLElement}}
    */
    const ripple = useRef(null);

    const toggleSpinner = useCallback((state) => {
        if (ripple.current) {
            if (state) {
                ripple.current.classList.remove("off-screen");
            }
            else {
                ripple.current.classList.add("off-screen");
            }
        }
    }, [ripple]);

    /*...*/

    return <>
        <div ref={ripple} className="off-screen spinner"></div>
        <FullCalendar
            loading={s => toggleSpinner(s)}

        />

    </>

祝一切顺利
斯塔凡