从父组件访问子组件引用

Question

我是新手，我正在尝试从父组件中的回调方法访问子组件引用。当我尝试访问引用时，我看到引用为空。

父组件

import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
import ChildComponentA from '../ChildComponentA';
import ChildComponentB from '../ChildComponentB’;

export default function ParentComponent(props) {

 const calendarRef = React.createRef();

const handleYearClick = (value) => {
    // const ref = React.createRef();
    console.log('click:', value, calendarRef);
    // setSelectedView('month');
    // const calendarApi = calendarRef.current.getApi();
};
const handleFilterEvent = (value) => {
const calendarApi = calendarRef.current.getApi();
if (value.includes('next')) calendarApi.next();
if (value.includes('prev')) calendarApi.prev();
}

return (

<section>

<ChildComponentA
    defaultView="dayGridMonth"
    eventData={allEvents}
    calendarRef={calendarRef}
     currentLang={currentLang}
/>
<ChildComponentB
 legendLabels={calendarLabels}
 currentYear={currentYear}
 yearEvents={allEvents}
onClick={handleYearClick}

/>
<ChildComponentC
 onClick={handleFilterEvent}
disableNextButton={disableNextButton}
disablePrevButton={disablePrevButton}

/>

<section/>
);

我在 ChildComponentA 中使用完整的日历库，并尝试从父级访问日历 Api。

我的子组件A中的代码是，

export default function ChildComponentA(props) {
const {
    eventData,
    defaultView,
    calendarRef,
    currentLang,
  } = props;
  return (
    <section className={rootClass}>
      <FullCalendar
        ref={calendarRef}
        plugins={[dayGridPlugin]}
        initialView={defaultView}
        nowIndicator
        editable
        headerToolbar={false}
        weekNumbers
        contentHeight="auto"
        events={eventList}
        dayMaxEventRows
        views={eventTimeGrid}
        eventOrder="-start"
        eventClick={(event) => handleEventClick(event.event)}
        locale={currentLang}
      />
</section>
);

}

已编辑：添加 ChildComponentB 代码，

export default function ChildComponentB(props) {

const MONTHNAMES = ['January', 'February', 'March', 'April', 'May', 'June','July', 'August', 'September', 'October', 'November', 'December',];

const customDayClick = (date, events) => {
    if (date) {
      const yearNum = moment(date.date).month();
      const month = MONTHNAMES[yearNum];
      const goToDate = `${currentYear}-${month}-01`;
      onClick(goToDate);
    }
    if (events) {
      console.log('events:', events);
    }

    return null;
  };


return (
    <>
      <section className={rootClass}>
        <Calender
          id="yearCalendar"
          allowOverlap
          displayHeader={false}
          dataSource={eventDataSource}
          displayWeekNumber={false}          
          onDayClick={customDayClick}
          year={currentYear}
          language={currentLang}
        />
);
}

当我在 parentComponent 中的 handleYearClick 内控制台记录 calendarRef 时，我将其视为 null 。 （{当前：空}当前：空）。但是，当我在作为 ChildComponentC 回调的 handleFilterEvent 方法中尝试相同的操作时，我会看到像 {current: FullCalendar} 这样的完整日历的引用。如何在 handleYearClick 中获取 FullCalendar 的引用。我错过了什么？如果有人可以帮助我解决这个问题，那就太好了。提前谢谢你。

Answer 1

所以您可以将handleYearClick 传递给子组件。

export default function ParentComponent(props) {

    const handleYearClick = (date) => {
        console.log('Want to go to date:', date);
    };

    return ( <ChildComponentB [...] onClick={handleYearClick} /> );
}

function ChildComponentB({handleYearClick}) {

    const customDayClick = (date, events) => {
        if (date) {
            const goTo = moment(date.date).format('YYYY-MMMM-01');
            handleYearClick(goTo);
        }
    };


    return ( <Calender onDayClick={customDayClick} [...] /> );
}