Как грамотно реализовать «назад» и «вперед»?

Question

[Jedi]

Имеются следующие компоненты по иерархии:

- Content
-- ContentPlayer (props: video_id, video_title)

В Content поступает плейлист с видеороликами. Когда пользователь выбирает что-то из плейлиста, ссылки меняются, а ContentPlayer обновляет данные.

Как реализовать в неком роде пагинацию? Назад и вперед?

Заранее спасибо!

Comments

[Антон Спирин]

Что вы подразумеваете под "в некотором роде пагинацией"?

[Jedi]

Антон Спирин, с помощью этих кнопок (назад и вперед) можно включить следующее или предыдущее видеоролик. Немного напоминает пагинацию.

Answer 1

[Антон Спирин]

render() {
  const { playList, slug }  = this.props;
  const index = playList.findIndex(i => i.slug === slug);
  const video = playList[index];
  const prev = playList[index - 1];
  const next = playList[index + 1];
  
  render(
    <div>
      {/* ... */}
      <div>
        {prev && <Link to={`/video/${prev.slug}`}>Prev</Link>}
        {next && <Link to={`/video/${next.slug}`}>Next</Link>}
      </div>
    <div/>
  );
}

Comments

[Jedi]

Антон, вы неправильно поняли. Это моя вина. С react-router-dom всё понятно, но каким образом лучше проверять, можно ли вернуться назад, можно ли следующий видосик включить или это последний в плейлисте. Вопрос в том, как это грамотно сделать?

Спасибо!

[Антон Спирин]

PHPjedi, что-то вроде:

render() {
  const { playList, slug }  = this.props;
  const index = playList.findIndex(i => i.slug === slug);
  const video = playList[index];
  const prev = playList[index - 1];
  const next = playList[index + 1];
  
  render(
    <div>
      {/* ... */}
      <div>
        {prev && <Link to={`/video/${prev.slug}`}>Prev</Link>}
        {next && <Link to={`/video/${next.slug}`}>Next</Link>}
      </div>
    <div/>
  );
}