Доступ к реквизиту в пользовательском React.createRef, возвращающем объект со значением null - PullRequest
Новая
       12

Доступ к реквизиту в пользовательском React.createRef, возвращающем объект со значением null

0 голосов
/ 25 февраля 2019

Я создаю настроенную карусель для отображения текущих примененных тегов фильтра.Я пытаюсь создать ссылку на элемент Карусель, чтобы иметь доступ к методам извне элемента Карусель.(Стилистические цели).

console.log ('carousel', this.carousel)

Я не понимаю, почему объект возвращается пустым, однако, когда я нажимаю стрелкудля расширения объекта у него есть все свойства и методы, к которым я хочу получить доступ.Это проблема времени?Небольшой значок «i» в console.log говорит: «Значение, указанное ниже, было оценено только сейчас» 

import React from 'react';
import Carousel from 'nuka-carousel';
import { Icon } from 'antd';

export default class StyledCarousel extends React.Component {
  private carousel: React.RefObject<Carousel>;

  constructor(props: any) {
    super(props);
    this.carousel = React.createRef();
  }

  public render() {
    const settings = {
      framePadding: '0px 18px 0px',
      frameOverflow: 'inherit',
    };

    console.log('carousel', this.carousel);

    return (
      <div className="carousel__wrapper">


// this is the Icon I am trying to add, however previousSlide is undefined


       <Icon
          type="left"
          className="leftIcon"
          style={{ fontSize: '20px' }}
          onClick={this.carousel.previousSlide}
        />

        <Carousel
          {...settings}
          ref={this.carousel}
        >
              {... list of filters here ...}
        </Carousel>

        <Icon
          type="right"
          className="rightIcon"
          style={{ fontSize: '20px', border: 'red 1px solid' }}
          onClick={this.carousel.nextSlide}
        />
      </div>
    );
  }
}

ОБНОВЛЕНИЕ 1

Я бросил console.log в компоненте, который смонтировал, и чторешена проблема синхронизации асинхронныхТеперь у меня есть объект, однако метод nextSlide (который я могу утешить в журнале и увидеть, что он существует) выдает неопределенную ошибку 

public componentDidMount() {
  {
  this.carousel.current &&
    console.log('carousel', this.carousel.current.nextSlide);
    // console logs the function definition ^^^^^^^^^^^^^^^
  }
}

 public render() {
   const settings = {
     framePadding: '0px 18px 0px',
     frameOverflow: 'inherit',
   };
   return (
     <div className="carousel__wrapper">
       {this.carousel && (
         <>
           <Carousel
             {...settings}
             ref={this.carousel}
           >
             {... list of filters here ...}
           </Carousel>
           <Icon
             type="right"
             className="rightIcon"
             style={{ fontSize: '20px', border: 'red 1px solid' }}
             onClick={this.carousel.current.nextSlide}
             // throws an undefined error
           />
         </>
       )}

ОБНОВЛЕНИЕ 2:

Я решил проблему чистос CSS.Спасибо (:

...