reactjs FullCalendar -React-加载函数问题

w80xi6nr 于 2022-12-22 发布在 React

关注(0)|答案(2)|浏览(160)

我正在使用FullCalander v5 for React，测试资源时间线视图。我遇到了一个“加载”函数的问题，目的是检查Fullcalendary状态，如果加载状态为真，则显示一个Spinner类型的组件（使用条件呈现）而不是时间轴，使用useState将Spinner组件状态设置为true。问题是，从呈现方法内部的Fullcalendar组件启动useState会启动一个无限的呈现循环。2有什么想法可以打破这个流程吗？

// 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}         
         .....

reactjs

来源：https://stackoverflow.com/questions/66818770/fullcalendar-react-loading-function-problem

2条答案

按热度按时间

whlutmcx1#

我的解决方案是（hack？）。不是让一个状态变量来控制spinner的呈现，而是添加一个css类来将其从屏幕上移除。然后我对spinner取了一个ref，在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)}

        />

    </>

所有最好的员工

赞(0）回复(0）举报 2022-12-22

vm0i2vca2#

我认为这个问题可能比仅仅有条件地显示日历更深刻。
如果我有：

const [loading, setLoading] = useState(false)
  ...

  {loading ? <Spinner /> : null}

  <FullCalendar
    plugins={[ dayGridPlugin ]}
    initialView="dayGridMonth"
    loading={e => setLoading(e)} // With this line, it continually reloads
    eventSources={[{
        url: '/api/calendar',
        method: 'GET',
      }]}
    />

如果我注解掉上面的加载行，它会非常好地工作，但是如果我想在加载时触发一个微调器，它会将数据加载放入一个无限循环。
就像任何事情发生变化，日历都会重新加载数据。
看起来像是一个错误（或缺少文档：https://fullcalendar.io/docs/loading）在带有React的完整日历中显示。
请注意，如果您只使用initialEvents，**它不会这样做，**但这样提供的灵活性较低。

赞(0）回复(0）举报 2022-12-22

我来回答

reactjs FullCalendar -React-加载函数问题

2条答案

相关问题

热门标签

最新问答