从父组件访问子组件参考

如何解决从父组件访问子组件参考

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

父组件

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内控制台console calendarRef时，我将其视为null。 （{current：null} current：null）。但是，当我在handleFilterEvent方法（这是ChildComponentC的回调）中尝试相同的方法时，我会看到完整的日历参考，例如{current：FullCalendar}。如何在handleYearClick中获取FullCalendar的引用。我想念什么？如果有人可以帮助我解决这个问题，那就太好了。预先谢谢你。

解决方法

因此您可以将chocRef.addDocument(data: ["Chocolates": ["Cadbury":["Wispa":467,"DoubleDecker":563],"Lindt":["Milk":"73","Strawberry Cream": 132],"Nestle": ["Galaxy": 43,"Milkyway": 342]] 传递给子组件。

handleYearClick

export default function ParentComponent(props) {

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

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