Блог

Я создаю музыкальное приложение с помощью React, и я новичок 🙂

Моя цель —

• загрузите список воспроизведения JSON (отформатированный как JSPF)
• отображение списка воспроизведения на основе этого JSON
• заполните очередь проигрывателя дорожками списка воспроизведения.

Итак, я работаю над несколькими компонентами: дорожкой, списком дорожек, списком воспроизведения и плеером.

• В списках дорожек есть дорожки.
• Список воспроизведения и проигрыватель имеют список дорожек (и другие вещи): очередь проигрывателя — это компонент списка дорожек.
• Проигрыватель не является потомком плейлиста, он находится в стороне. Например, я хочу иметь возможность ставить в очередь (или отменять очередь) некоторые треки списка воспроизведения в проигрыватель.

Я хочу иметь возможность делиться / синхронизировать реквизит a (тот же) Дорожка между списком воспроизведения и плеером :

Допустим, у меня есть любимый реквизит для трека.
Я бы переключил его, нажав кнопку, вложенную в компонент дорожки. Мне нужно обновить реквизит обоих треков, либо если я нажму кнопку в списке воспроизведения, либо в проигрывателе; и наоборот: все реквизиты должны быть «синхронизированы».

Могу ли я сделать это с помощью React и как?

Большое спасибо за ваши советы!

У вас должен быть компонент контейнера и другие компоненты (дорожка, список дорожек, список воспроизведения и проигрыватель) в качестве дочерних элементов компонента контейнера, компонент контейнера может передавать реквизиты дочерним элементам и использовать функции в качестве реквизита, поэтому может иметь всю логику.

Вы можете проверить этот пример: https://github.com/upretim/thinking-in-react /

В этом примере все компоненты, кроме компонента приложения, являются немыми / функциональными компонентами, приложение является интеллектуальным / с сохранением состояния или контейнерным компонентом, в котором есть вся логика и данные. В примере значение filter разделяется между дочерними компонентами с использованием родительского компонента.