React и методы карусели
Я смотрю на использование antd Carousel, но я не видел примера, описывающего, как использовать метод goTo(slideNumber, dontAnimate).
Я пытался использовать ответы на этот вопрос React.js и карусель со стрелками, чтобы заставить метод 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.info(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.info(this.carousel) всегда возвращает null, что я делаю не так?
p.s реагировать на версию 16.4.1,
к сожалению нет, есть идеи? @DennisVash
Проверьте мой ответ, надеюсь, это поможет
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вам нужно передать ref вашему дочернему компоненту, например,
<ImageViewer url = {url} onClose = {this.props.onClose} imgList = {imgList} onRef = {this.carousel} />
И может получить доступ к дочернему компоненту, например,
<Carousel ref = {props.onRef}>
{props.imgList}
</Carousel>
При печати в componentDidMount,
componentDidMount() {
console.info(this.carousel); // If this gives you ref object
console.info(this.carousel.current); //This will give you element
console.info(this.carousel.current.value); //This will give you element's value if element has value.
}
Упрощенный Демо с использованием ввода.
Спасибо, я сделал именно так, как вы мне сказали, но я получил этот странный результат в консоли prntscr.com/oc54gx (первый результат нулевой, но с информацией, что значение было оценено только что), вы не знаете, почему это произошло?
Вы получите ссылку на карусель, используя this.carousal.current. Вы получаете {current:null}, потому что обычно он возвращает элемент HTML, а Carousal не является элементом HTML.
componentDidMount() { console.info(this.carousel) - возвращает {current: null} (но как сказано выше с информацией, что значение было оценено только что) console.info(this.carousel.current) - возвращает null }
вместо карусели, вы можете попробовать добавить ссылку на элемент карусели, например <Carousel ><div ref = {props.onRef}>{props.imgList}</div></Carousel> . Также убедитесь, что imgList является массивом, а затем повторите то же самое, используя Array.map.
ref на div (<Carousel ><div ref = {props.onRef}>{props.imgList}</div></Carousel>) по-прежнему возвращает null =(
Как выглядит props.imgList?
const imageListToCarousel = images.map((image, index) => { return ( <> <Image> <StyledImg src = {image} key = {index} /> </Image> </> ) });Вы должны повторять props.imgList лайк, <Carousel >{props.imgList.map(image => <div ref = {props.onRef}>{image}</div>)}</Carousel>
@JANEDOE Я использовал обычную карусель в своей демонстрации, просто посмотрите добавленную мной демонстрацию, она работает сейчас. Нет необходимости перемещать ссылку на дочерний компонент, вы можете <Carousel ref = {props.onRef}> {props.imgList} </Carousel> Посмотреть демо - codeandbox.io/s/react-codesandbox-27rug?fontsize=14
@JANEDOE Вы проверили демо?
и Carousel — это реализация react-slick, вы можете проверьте его пример API.
Вот мой пример с использованием хуков:
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.info(ref);
slider.current = ref;
}}
>
<div>
<h3>0</h3>
</div>
<div>
<h3>1</h3>
</div>
</Carousel>
</Row>
</div>
);
}
Хорошо, я принимаю ваше решение, но, к сожалению, в моем рабочем проекте мы не используем хуки (поэтому, если вы найдете лучшее решение без хуков, сообщите мне об этом =)
Ваша проблема решена?