React antd carousel methods

Question

I am looking at using the antd Carousel, but I've not seen an example that describes how to use goTo(slideNumber, dontAnimate) method.

I have tried to use answers on this question react.js antd carousel with arrows to make goTo method works for me, but it didn't help, I always get carousel ref as null

import * as React from 'react';
import { createPortal } from 'react-dom';
import { Modal, Carousel } from 'antd'

export default class ImagePreviewCarousel extends React.Component<any, any> {

    carousel = React.createRef();

    componentDidMount() {
        console.log(this.carousel);
    }

    render() {
        const { url, imgList } = this.props;
        const orderLayout = document.getElementById('order-layout');
        const applicationLayout = document.getElementById('application');

        return (
            createPortal(<ImageViewer url={url} onClose={this.props.onClose} imgList={imgList} />, orderLayout || applicationLayout)
        )
    }
}

const ImageViewer = (props: IProps) => {
    return (
        <Modal 
            footer={null} 
            visible={props.onClose} 
            onCancel={props.onClose}
            bodyStyle={{ backgroundColor: '#000' }}
            width={'800px'}
        >
            <div style={{
                display: 'flex', 
                flexDirection: 'column', 
                justifyContent: 'center', 
                marginTop: 'auto', 
                marginBottom: 'auto', 
                width: '100%',
                height: '100%', 
                zIndex: 10
            }}>
                <Carousel ref={node => (this.carousel = node)}>
                    {props.imgList}
                </Carousel>
            </div>
        </Modal>
    );
}

result of console.log(this.carousel) always returns null, what am i doing wrong?

p.s react version 16.4.1,

Answer 1

antd Carousel is an implementation of react-slick, you can check its API example.

Here is my example using hooks:

import React, { useRef, useState } from 'react';
import { Carousel, Row, InputNumber } from 'antd';


function App() {
  const [slide, setSlide] = useState(0);

  const slider = useRef();

  return (
    <div>
      <Row style={{ marginBottom: 10 }}>
        <InputNumber
          min={0}
          max={3}
          value={slide}
          onChange={e => {
            setSlide(e);
            slider.current.goTo(e);
          }}
        />
      </Row>
      <Row>
        <Carousel
          dots={false}
          ref={ref => {
            console.log(ref);
            slider.current = ref;
          }}
        >
          <div>
            <h3>0</h3>
          </div>
          <div>
            <h3>1</h3>
          </div>
        </Carousel>
      </Row>
    </div>
  );
}

Answer 2

You need to pass ref to your child component like,

<ImageViewer url={url} onClose={this.props.onClose} imgList={imgList} onRef={this.carousel} />

And can access in child component like,

<Carousel ref={props.onRef}>
       {props.imgList}
</Carousel>

While printing in componentDidMount,

componentDidMount() {
   console.log(this.carousel); // If this gives you ref object 
   console.log(this.carousel.current); //This will give you element
   console.log(this.carousel.current.value); //This will give you element's value if element has value.
}

Simplified Demo using input.