Как применить в React код написанный на нативном js (создать похожую реализацию)?
Ребята, приветствую. Заклинило на одном моменте. В react-компоненте внутри componentDidMount вызывается слайдер . Необходимо создать дополнительную обертку node, внутри которой будет вызываться методы слайдера. Нужно в каждый экземпляр слайдера передавать разные дом-элементы. Есть похожий пример на js, но не могу понять как его можно применить для react. Занимаюсь сейчас поддержкой существующего кода и не хочется переписывать все заново ) . Буду благодарен за помощь или дельный совет .
Ответы (1 шт):
Автор решения: artomich
→ Ссылка
Обёртка для слайдера и прочие не создаваемые автоматически элементы, вроде кнопок, должны быть предусмотрены в вёрстке вашего компонента изначально. Чтобы корректно получить к ним доступ, используйте рефы. Будет как-то так:
...
constructor(props) {
...
this.dom_slider = React.createRef();
this.dom_slider_prevButton = React.createRef();
this.dom_slider_nextButton = React.createRef();
}
...
componentDidMount() {
this.slider = new Swiper(this.dom_slider.current, {
...
navigation: {
prevEl: this.dom_slider_prevButton.current;
nextEl: this.dom_slider_nextButton.current;
}
})
}
render() {
return (
...
<div class='slider'>
<div ref={this.dom_slider} class='slider__container' />
<div ref={this.dom_slider_prevButton} class='slider__prevButton' />
<div ref={this.dom_slider_nextButton} class='slider__nextButton' />
</div>
...
);
}