javascript - React antd 轮播方法

Question

我正在考虑使用 antd 轮播，但我还没有看到描述如何使用 goTo(slideNumber, dontAnimate) 方法的示例。

我尝试使用这个问题的答案 react.js antd carousel with arrows使 goTo 方法对我有用，但没有帮助，我总是将 carousel ref 设置为 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>
    );
}

console.log(this.carousel) 的结果总是返回 null，我做错了什么？

p.s react 版本 16.4.1，

Answer 1

antd Carousel是react-slick的一个实现，你可以check its API example .

这里是 my example使用钩子(Hook):

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>
  );
}