React中FullCalendar API调用：为何handleref方案能获取实例？

核心本质：React组件ref ≠ FullCalendar核心实例 #

FullCalendar的React组件是对原生日历库的封装，直接给<FullCalendar>加React的ref（不管是createRef还是useRef），拿到的是React组件自身的实例，不是底层的日历核心实例。而gotoDate这类API是属于核心实例的，所以直接调用会失效。

为啥别人直接绑ref能生效？ #

主要有三种情况：

• 版本差异：FullCalendar v4及更早的React封装，会把核心实例直接挂载到组件ref上，所以直接拿ref.current就能调用API。但v5+之后调整了设计，必须通过组件实例的getApi()方法才能获取核心实例。
• 漏看了关键调用：很多案例里看似直接绑ref，其实是调用了ref.current.getApi()来拿到核心实例，只是你没注意到这一步操作。
• 用了二次封装组件：有些案例使用的是团队内部二次封装的<FullCalendar>，内部已经处理了ref透传，把核心实例直接暴露给外部ref，所以不用额外处理。

handleref方案为啥能行？ #

FullCalendar的React组件提供了一个特殊的ref prop——它可以接收一个回调函数，这个回调会在组件初始化完成后，直接把底层日历核心实例作为参数传进来。你通过这个回调把实例存到useRef里，自然就能直接调用API了。

两种正确用法对比 #

用法1：直接绑React ref + 调用getApi #

import { useRef, useEffect } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

function MyCalendar() {
  const calendarRef = useRef(null);

  useEffect(() => {
    // 组件渲染后调用API
    if (calendarRef.current) {
      const calendarApi = calendarRef.current.getApi();
      calendarApi.gotoDate('2024-05-01');
    }
  }, []);

  return (
    <FullCalendar
      ref={calendarRef}
      plugins={[dayGridPlugin]}
      initialView="dayGridMonth"
    />
  );
}

用法2：自定义handleref回调 #

import { useRef, useEffect } from 'react';
import FullCalendar from '@fullcalendar/react';
import dayGridPlugin from '@fullcalendar/daygrid';

function MyCalendar() {
  const calendarRef = useRef(null);

  const handleCalendarRef = (calendarApi) => {
    calendarRef.current = calendarApi;
  };

  useEffect(() => {
    if (calendarRef.current) {
      calendarRef.current.gotoDate('2024-05-01');
    }
  }, []);

  return (
    <FullCalendar
      ref={handleCalendarRef}
      plugins={[dayGridPlugin]}
      initialView="dayGridMonth"
    />
  );
}

内容的提问来源于stack exchange，提问作者Allen Y