FullCalendar - React - 加载功能问题答案

【问题标题】：FullCalendar - React - loading function problemFullCalendar - React - 加载功能问题
【发布时间】：2021-03-26 14:24:02
【问题描述】：

我正在为 React 使用 FullCalander v5，测试资源时间线视图。我遇到了“加载”功能的问题，目的是检查 Fullcalendar 状态，如果加载状态为真，则显示 Spinner 类型组件（带有条件渲染）而不是 Timeline，设置 Spinner 组件状态使用 useState 为真。问题是，从渲染方法内部的 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}         
         .....

【问题讨论】：

可能是问题，因为重新初始化 fullCalendar 会再次触发加载事件。所以不要那样做。相反，只需在日历顶部的模式中显示微调器。不要尝试同时隐藏和显示日历。如果您真的希望日历完全消失，您可以将模式设为全屏和不透明/实心。
你的组件是函数组件还是类组件？创建无限循环的代码在哪里？
FullCalender 组件在另一个功能组件（Contanier）内部，FullCalendar 的“加载”功能是触发一切的功能。通过激活一个useState，它触发了Container组件的重新渲染，它又重新渲染了FullCalendar，而FullCalendar又再次处于“加载”状态（我认为这是FCalendar的内部状态），它从头开始触发一切。问题是是否有办法在 React 中使用这个函数而不会进入这个循环，或者我是否设置了整体逻辑错误。在带有 Jquery 的纯 Js 中，我已经看到您只需执行 onhide() 等，
我不知道具体反应，但您的逻辑似乎错误。您似乎通过可能重新加载日历来响应加载事件，这反过来又会再次触发加载事件，从而重新加载日历。我不确定，但这就是听起来正在发生的事情。加载事件应该只是加载和卸载您的模态......没有别的。 “条件渲染”究竟是为了响应什么？目前还不清楚它与您的其余代码的关系，包括您最初如何初始化日历。
是的，这正是发生的事情。为了打开 Spinner cmp，我将 React 中的状态设置为 true。在上面的代码中，{spinner} 是条件渲染部分，如果状态 spinner = true，则显示 Spinner cmp，如果不是，则渲染 FCal 组件。这通常是我在 React 中将模态用于其他项目的方式。出于这个原因，我问是否应该在 React 中以另一种方式使用 fullCalendar 的加载功能。

标签： html css reactjs fullcalendar fullcalendar-5

【解决方案1】：

也一样。我的解决方案（黑客？）正在跟进。与其让状态变量规则渲染微调器，不如添加一个 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)}

        />

    </>

一切顺利斯塔凡

【讨论】：