Как передать DOM через prop?

Question

[Илья Лившиц]

Пишу проигрыватель видео.

<div id="media-player" className="small-12 small-centered large-centered">
        <video id="media-video"
                       width="100%"
                       src=""
                       controls
                       ref={(player) => this.mediaPlayer = player}>
       </video>
       <PlayerControls/>
</div>

тут есть сам компонент видео проигрывателя (<video/>) и компонент контролов (ProgressBar, Play/Pause...). Так вот, все действия, внутри контролов мне нужно проводить внутри самих контролов, но воздействовать они будут на DOM элемент <video/>. Можно ли как-то передать этот компонент внутрь, как например <PlayerControls player={this.mediaPlayer}/>? Пытался в Component Lyfecycle методах, но там он еще не отрендерен и поэтому Null. А на DidMount у меня уже контролы отрендерятся.

Да, можно было бы внутри контролов делать getElementById, но сами понимаете, делать это в каждом из компонентов (они скорее всего будут биться на подкомпоненты) не оч хорошо, придется несколько раз делать query.

Спасибо.

Comments

[Олег Гамега]

а в сторону redux не хотите посмотреть ?

[Илья Лившиц]

Олег Гамега: изначально хотел. Но потом решил, что его функционал мне будет излишним

Answer 1

[Алексей Немиро]

Не проще ли сделать общего родителя для видео и элементов управления?

<mediaPlayer>
  <video ref={(v) => this.video = v} />
  <playerControls onStop={...} onPlay={...} onPause={...} />
</mediaPlayer>

Тогда элементы управления смогут общаться с проигрывателем через общего родителя.

Comments

[Илья Лившиц]

плохо понял пока как это сделать, но мне кажется, что в таком случае обработчики onPlay/Pause и т.п. будут лежать в компоненте плеера. а я бы хотел вынести их в дочерние компоненты. ибо как еще.

[Алексей Немиро]

Илья Лившиц: да, обработчики будут в общем контейнере, который сможет управлять состоянием всех своих детей.

Без передачи ссылок манипулировать чем-то сверху из глубин дерева компонентов будет сложно.

Тогда нужен какой-нибудь Redux, он позволит решить проблему с передачей ссылок и сделает работу более удобной.

Либо разместить таймер, который будет ловить команды и выполнять необходимые действия с компонентами. Но такое решение может быть кривым, в зависимости от целей и реализации.

[Алексей Немиро]

Илья Лившиц: ну или поместить video в PlayerControls:

<PlayerControls>
   <video ref={(v) => this.video = v} />
</PlayerControls>

Тогда PlayerControls сможет управлять video.

[Илья Лившиц]

Спасибо, остановлюсь на варианте, где обработчики в базовом контейнере и будут просто прокидываться внутрь. Я думаю мне подходит. Спасибо.

Answer 2

[timfcsm]

сорри, кажется не правильно понял задачу