Question

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

我尝试使用有关问题react.js antd carousel with arrows的答案来使goTo方法对我有用，但没有帮助，我总是将轮播参考设为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

您需要将ref传递给子组件，例如

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

并且可以访问子组件，如

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

在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.
}

使用输入法简化了Demo。

Answer 2

antd Carousel是react-slick的实现，您可以check its API example。

这里是my example的钩子：

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

反应蚂蚁轮播方法

2 个答案: