Передача ссылки на динамически созданных детей - PullRequest
Новая
       8

Передача ссылки на динамически созданных детей

0 голосов
/ 04 февраля 2020

Я использую компонент React Infinite Calendar и хочу пересылать Ref динамически созданным дочерним компонентам. Таким образом, я могу получить доступ к первой активной дате. Чтобы прокрутить его в поле зрения. (способ реакции)

это ванильный путь javascript: 

const enabledDate = document.getElementsByClassName('Cal__Day__enabled');enabledDate[0].scrollIntoView();

Я делаю это в реакции, но не могу получить доступ к детям в ref.current. Я в настоящее время использую реакцию без гражданства 

import React, { memo, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import InfiniteCalendar, { Calendar, withRange } from 'react-infinite-calendar';
import '../../styles/datePicker.css';
import styles from './style.scss';

const datePickerStyleformat = {
  accentColor: '#0073BA',
  selectionColor: '#0073BA',
  textColor: {
    default: '#333',
    active: '#FFF',
  },
  weekdayColor: 'rgb(241, 243, 244)',
  headerColor: '#F1F3F4',
  floatingNav: {
    background: '#FFFFFF 0% 0% no-repeat padding-box',
    color: '#3F464D',
    chevron: '#FFA726',
  },
};

function DatePicker(dates) {
  useEffect(() => {
    var q = ref.current;
    console.log(q);
    // If you dont have value for the first date, datepicker automatically sets 12/31,
    // this function clears that
    const x = document.getElementsByClassName('Cal__Header__date');
    x[1].innerHTML = '';

    const enabledDate = document.getElementsByClassName('Cal__Day__enabled');
    enabledDate[0].scrollIntoView();
  }, []);

  const { date__select, DatePickerStyle } = styles;
  const {
    dateStart,
    dateEnd,
    selectedStart,
    selectedEnd,
    allowNewReservations,
  } = dates.dates;


  const passSelectedDate = () => e => {
    let datesPicked = null;
    const endPicked = e.eventType === 1 ? null : e.end;
    if (e.eventType !== 2) {
      datesPicked = {
        selectedStart: e.start,
        selectedEnd: endPicked,
        dateEnd,
        dateStart,
        allowNewReservations,
      };
      dates.passUpTheChain(datesPicked, true);
    }
  };


  const ForwardRefDatePicker = React.forwardRef((props, ref) => (
    <InfiniteCalendar
      ref={ref}
      className={DatePickerStyle}
      theme={datePickerStyleformat}
      Component={withRange(Calendar)}
      selected={{
        start:
          selectedStart !== null
            ? selectedStart
            : dates.selectedDate.pickedStartDate,
        end:
          selectedEnd !== null ? selectedEnd : dates.selectedDate.pickedEndDate,
      }}
      min={dateStart}
      minDate={dateStart}
      maxDate={dateEnd}
      max={dateEnd}
      height={165}
      width={375}
      displayOptions={{
        overscanMonthCount: 0,
        showOverlay: false,
        showTodayHelper: false,
      }}
      onSelect={passSelectedDate()}
    >
      {props.children}
    </InfiniteCalendar>
  ));
  const ref = React.createRef();
  return (
    <div className={date__select}>
      <ForwardRefDatePicker ref={ref} />
    </div>
  );
}
DatePicker.propTypes = {};
export default memo(DatePicker);
...