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

Question

[uzi_no_uzi]

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

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 /> компонент не понятно.

Comments

[twoone]

Slider кастомный? Зачем SliderArrow потребовалась ссылка на Slider? Почему SliderArrow находится в одном блоке с Accordion, а не Slider?

[uzi_no_uzi]

twoone, Slider - это слайдер от Slick'a, стрелки просто находиться в другом блоке, не там, где сам слайдер и стрелки кастомные, для этого мне нужно на нажатию на стрелки использовать API слайдера и вызывать slickNext, slickPrev функции, а для этого необходимо передать экземпляр слайдера этому компоненту.

[TRNER]

uzi_no_uzi, Мне кажется, будет правильнее поднять этот функционал на уровень выше в компонент, который оборачивал в себя Slider и SliderArrow, а так же хранил в себе и ref на Slider, и функцию-обработчик на клик по SliderArrow, которую мы передадим в качестве пропса..

Answer 1

[Jasulan98]

Думаю я бы вынес функцию в родительский компонент и передал бы в обоих дочерний компонент . Но не знаю насколько будет правильным