FullCalendar - React -加载函数问题
FullCalendar - React -加载函数问题
提问于 2021-03-26 22:24:03
我正在使用FullCalander v5进行React，测试资源时间轴视图。我遇到了一个“加载”函数的问题，其目的是检查全日历状态，在加载状态为真的情况下，显示微调器类型的组件(使用条件渲染)而不是时间轴，使用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}
.....
回答 1
Stack Overflow用户
发布于 2021-05-07 23:19:23
也是一样的。我的解决方案(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)}
/>
</>所有最好的员工
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/66818770
复制相关文章
相似问题
腾讯云开发者
