Что нового в Реакте 16?

 case "pause": this.setState({ playing: false },this.pauseAudio); break; 

Вторым аргументом для нашего setState функции setState является наша функция this.pauseAudio , которая ссылается на audio элемент и вызывает функцию pause() .

 pauseAudio(){ this.audioElement.pause(); } 

Кнопка << (предыдущая)

При нажатии значка << id предыдущей кнопки соответствует регистру «prev» оператора switch, поэтому выполняется код, связанный с регистром «prev». В случае «prev» мы снова вызываем this.setState() с помощью функции, аналогичной той, которую мы использовали для воспроизведения и приостановки приложения. На этот раз мы используем предыдущее значение currentTrackIndex чтобы уменьшить значение и вернуть объект, чтобы установить currentTrackIndex в новое значение.

 case "prev": this.setState((state, props) => { let currentIndex = state.currentTrackIndex - 1; if (currentIndex <= 0) { return null; } else { return { playing:true,currentTrackIndex: currentIndex }; } },this.playAudio); 

Возвращение null из setState

Одно из новых изменений в React 16 заключается в том, что когда мы возвращаем значение null из функции setState , наше приложение не будет повторно отображаться. Наш трек-лист имеет 11 треков. Если пользователь продолжает нажимать кнопку << , currentTrackIndex будет уменьшаться до тех пор, пока не достигнет 0. Как только он достигнет 0, мы больше не хотим уменьшать currentTrackIndex и нам больше не нужно повторно отображать наше приложение. Мы также делаем то же самое, когда щелкает наш значок >> . Если currentTrackIndex равно (или больше) количеству дорожек в нашем списке (11), мы возвращаем null из setState .

Кнопка >> (следующая)

Когда кнопка >> вызывается, мы имеем такую ​​же функциональность, как и кнопка << . Каждый раз, когда пользователь нажимает >> , мы увеличиваем значение currentTrackIndex и проверяем, что currentTrackIndex не превышает длину списка дорожек. Если это так, мы возвращаем null в нашем setState функции setState .

 case "next": this.setState((state, props) => { let currentIndex = state.currentTrackIndex + 1; if (currentIndex > data.tracks.length) { return null; } else { return { playing:true,currentTrackIndex: currentIndex }; } },this.playAudio); break; 

Список треков

Мы жестко закодировали данные трек-листа в файл JSON для простоты понимания концепций в этом посте. Мы импортируем данные из файла JSON вверху, и в нашем методе жизненного цикла componentDidMount мы устанавливаем состояние нашего компонента TrackList . Состояние нашего компонента TrackList содержит одну переменную, переменную TrackList .

Методы жизненного цикла componentDidMount и componentDidUpdate

Каждый компонент React, в дополнение к функции setState , также имеет доступные методы жизненного цикла. Наш компонент TrackList использует два из них: componentDidMount и componentDidUpdate . componentDidMount вызывается, когда компонент React доступен в DOM. В этом случае мы хотим добавить некоторые данные в наш компонент, так что для этого setState вызвать setState в componentDidMount .

Когда наш компонент App обновляет currentTrackIndex , метод componentDidUpdate в нашем компоненте TrackList запускается, потому что компонент TrackList получает новые данные. Когда компонент TrackList получает новые данные, мы хотим убедиться, что TrackList выбранная дорожка находится в нашем окне просмотра, поэтому мы делаем некоторые вычисления, чтобы определить, где в DOM существует текущая выбранная дорожка, и сделать ее отображаемой в представлении контейнера списка дорожек. ,

 componentDidUpdate() { if (this.activeTrack) { let topOfTrackList = this.trackList.scrollTop; let bottomOfTrackList = this.trackList.scrollTop + this.trackList.clientHeight; let positionOfSelected = this.activeTrack.offsetTop; if ( topOfTrackList > positionOfSelected || bottomOfTrackList < positionOfSelected ) { this.trackList.scrollTop = positionOfSelected; } } } 

Отображение списка треков

Мы используем функцию map JavaScript, чтобы зациклить наш массив дорожек и вызвать функцию для каждого элемента в массиве. Мы вызываем функцию renderListItem , которая содержит некоторую логику, чтобы определить, является ли currentTrackIndex текущим элементом в массиве, который мы отображаем. Если это так, нам нужно убедиться, что значение для className в li включает selected строку. Это гарантирует, что стилизация для выбранной дорожки будет отличаться по сравнению с остальной частью списка.

 renderListItem(track, i) { let trackClass = this.props.currentTrackIndex === track.id ? "selected" : ""; return ( <li key={track.id} className={trackClass} ref={cur => { if (this.props.currentTrackIndex === track.id) { this.activeTrack = cur; } }} onClick={()=>{this.props.selectTrackNumber(track.id)}} > <div className="number">{track.id}</div> <div className="title">{track.title}</div> <div className="duration">{track.duration}</div> </li> ); } 

Элемент li также содержит некоторые другие важные атрибуты:

• key : всякий раз, когда у нас есть список, нам нужно включить этот атрибут, чтобы список отображался правильно. Для получения дополнительной информации об использовании ключей со списками в React, ознакомьтесь с этой статьей в документации React .

• className : чтобы убедиться, что к li прикреплен selected класс, если это className выбранный трек.

• ref : мы используем атрибут ref для вычисления правильного местоположения контейнера списка дорожек. Если текущий трек не виден, мы рассчитываем местоположение текущего трека и делаем его видимым. Нам нужно получить доступ к фактическому элементу DOM, чтобы сделать этот расчет правильно.

• onClick : когда пользователь выбирает конкретную дорожку, мы вызываем эту функцию, которая вызывает this.props.selectTrackNumber . Эта функция передается в компонент TrackList из нашего родительского компонента App , как и обработчик TrackList компонента Controls . Когда эта функция вызывается, состояние нашего приложения обновляется, и currentTrackIndex получает номер дорожки, выбранный пользователем.

 selectTrackNumber(trackId){ this.setState({currentTrackIndex:trackId,playing:true},this.playAudio); } 

Попробуйте!

Посмотрите пример Codepen. Обложка альбома взята из альбома группы под названием Glass Animals. Поскольку мы не можем легально транслировать саундтрек «Glass Animals», мы выбрали музыку без роялти, чтобы играть вместо нее, чтобы мы могли получить полный эффект от музыкального проигрывателя.