React antd 走马灯方法

Question

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

我尝试使用这个问题react.js antd carousel with arrows上的答案来让goTo方法适用于我的情况，但是它没有帮助我，我总是得到null作为Carousel引用。

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，我做错了什么？

附注：React版本为16.4.1。

- Sasha Chekmareva

---

你的问题解决了吗？ - Dennis Vash

很遗憾，没有任何想法？@DennisVash - Sasha Chekmareva

请查看我的答案，希望能有所帮助。 - Dennis Vash

Answer 1

Antd 轮播是基于 react-slick 实现的，您可以查看其 API 示例。

这是使用 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>
  );
}

- Dennis Vash

---

很好，我接受你的解决方案，但不幸的是，在我的工作项目中我们不使用钩子 ;( 所以，如果你能找到更好的解决方案而不需要钩子，请告诉我 =) - Sasha Chekmareva

Answer 2

您需要像这样将 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.
}

使用输入简化的演示。

- ravibagul91

---

谢谢，我按照你告诉我的做了，但是在控制台中得到了这个奇怪的结果 http://prntscr.com/oc54gx （第一个结果为null，但是有信息表明值刚刚被评估），你知道为什么会发生这种情况吗？ - Sasha Chekmareva

你能否尝试在 Carousel Item 上添加 ref，像这样<Carousel><div ref={props.onRef}>{props.imgList}</div></Carousel>。此外，请确保如果 imgList 是一个数组，则使用 Array.map 进行迭代。 - ravibagul91

props.imgList看起来是什么样子？ - ravibagul91

const imageListToCarousel = images.map((image, index) => { return ( <> <Image> <StyledImg src={image} key={index} /> </Image> </> ) }); - Sasha Chekmareva

您必须像这样迭代props.imgList， <Carousel >{props.imgList.map(image => <div ref={props.onRef}>{image}</div>)}</Carousel>。 - ravibagul91