@uzi_no_uzi

Как передать ref дочернему элементу через props?

Имеется такой компонент:

class Services extends React.Component {

    constructor(props) {
        super(props);

        this.slider = React.createRef();
    }

    render() {

        const sliderOptions = {
            dots: false,
            infinite: true,
            speed: 500,
            slidesToShow: 2,
            slidesToScroll: 1,
            arrows: false,
        }

        return(
            <section className={style.services}>
                <div className={style.servicesLeft}>
                    <Accordion />
                    <SliderArrows slider={this.slider} />
                </div>
                <div className={style.servicesRight}>
                    <Slider ref={this.slider} {...sliderOptions}>
                        <ServiceItem  />
                        <ServiceItem  />
                    </Slider>
                </div>
            </section>
        )
    }

}


Мне нужно передать ссылку на слайдер (<Slider></Slider>) компоненту со стрелками(<SliderArrows />) через props. Проблема в том, что в компоненте<SliderArrows />передаваемая ссылка равна null, т.е. она не передается. Почитав документацию, я наткнулся на forwardRef, но до конца не понял, как это работает и вообще поможет ли это в моем случаи

Вот что я попытался сделать сам:
Я создал HOC
import React from 'react';

function ForwardRefSlider(Slider) {
    return React.forwardRef((props, ref) =>{
        <Slider />
    })
}


Функция ForwardRefSlider принимает компонент слайдера, оборачивает его в forwardRef, я не знаю, в правильном ли направлении двигаюсь или нет, дальше я просто застрял, как мне далее эту функцию использовать, где будет находиться моя ссылка и как ее передать в <SliderArrows /> компонент не понятно.
  • Вопрос задан
  • 60 просмотров
Пригласить эксперта
Ответы на вопрос 1
@Jasulan98
Думаю я бы вынес функцию в родительский компонент и передал бы в обоих дочерний компонент . Но не знаю насколько будет правильным
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы