В этом задании вы потренируетесь избавляться от props-drilling при помощи использования контекста React. У нас есть приложение со списком треков, у каждого трека есть собственная кнопка pla

Вопрос пользователя:

В этом задании вы потренируетесь избавляться от props-drilling при помощи использования контекста React. У нас есть приложение со списком треков, у каждого трека есть собственная кнопка play/pause . Если у трека отображается кнопка play , то считаем, что трек в данный момент не играет, и мы можем начать его воспроизводить, нажав на play. Если отображается кнопка pause ,то считаем, что в данный момент трек воспроизводится, и мы можем остановить его воспроизведение, нажав на pause . В один момент времени может воспроизводиться только один трек, то есть кнопка pause может отображаться только для одного трека в списке. Что мы имеем в коде: Компонент PlayPause . Он получает через props : track – трек, воспроизведение которого начинает эта кнопка. Каждый отдельный компонент кнопки PlayPause получает свой трек. currentPlayingTrack трек, который в данный момент воспроизводится, он не обязательно должен совпадать с track setCurrentPlayingTrack – метод для установка нового currentPlayingTrack Компонент PlayPause сравнивает track и currentPlayingTrack . Если track и currentPlayingTrack совпадают, значит пользователь нажимает play/pause на одном и том же треке и нужно отобразить у него либо play либо pause. Если не совпадают, то значит play/pause нажимают у другого трека и нужно поставить pause у этого трека, так как пользователь управляет воспроизведением другого трека. Компонент Track – визуальное представление трека, использует в себе компонент PlayPause Компонент TrackList – визуальное представление списка треков, использует в себе компонент Track Компонент App – самый верхний компонент в иерархии, создает переменную состояния currentPlayingTrack и функцию setCurrentPlayingTrack Обратите внимание, что в данном примере достаточно много вложенных друг в друга компонентов. Из самого верхнего App до самого нижнего PlayPause прокидываются два пропса currentPlayingTrack и setCurrentPlayingTrack . Вам необходимо, используя контекст в React, избавиться от прокидывания currentPlayingTrack и setCurrentPlayingTrack заготовка для app : import {Layout} from '../components/Layout/Layout'; import {TrackList} from '../components/TrackList/TrackList'; import {useState} from 'react'; import {TrackModel} from '../models/Track'; const tracks: TrackModel[] = [ { id: 1, title: 'Space Oddity', duration: '5:15' }, { id: 2, title: 'The Man Who Sold The World', duration: '3:59' }, { id: 3, title: 'Starman', duration: '4:14' } ] export const App = () => { const [currentPlayingTrack, setCurrentPlayingTrack] = useState<TrackModel | null>(null) return ( <Layout> <TrackList tracks={tracks} currentPlayingTrack={currentPlayingTrack} setCurrentPlayingTrack={setCurrentPlayingTrack}/> </Layout> ) }

Ответ нейросети:

Пройдите быструю авторизацию для просмотра:

Для решения этой проблемы с прокидыванием пропсов через несколько уровней компонентов можно использовать контекст в React. Создадим контекст для управления текущим воспроизводимым треком:

import { createContext, useContext, useState } from 'react';
import { TrackModel } from '../models/Track';

interface PlayerContextType {
  currentPlayingTrack: TrackModel | null;
  setCurrentPlayingTrack: (track: TrackModel | null) => void;
}

const PlayerContext = createContext<PlayerContextType>({
  currentPlayingTrack: null,
  setCurrentPlayingTrack: () => {},
});

export const usePlayer = () => useContext(PlayerContext);

export const PlayerProvider: React.FC = ({ children }) => {
  const [currentPlayingTrack, setCurrentPlayingTrack] = useState<TrackModel | null>(null);

  return (
    <PlayerContext.Provider value={{ currentPlayingTrack, setCurrentPlayingTrack }}>
      {children}
    </PlayerContext.Provider>
  );
};

Теперь обернем наше приложение в PlayerProvider и воспользуемся хуком usePlayer в компонентах, где нам необходим доступ к текущему воспроизводимому треку:

import { Layout } from '../components/Layout/Layout';
import { TrackList } from '../components/TrackList/TrackList';
import { PlayerProvider } from '../context/PlayerContext';
import { TrackModel } from '../models/Track';

const tracks: TrackModel[] = [
  {
    id: 1,
    title: 'Space Oddity',
    duration: '5:15'
  },
  {
    id: 2,
    title: 'The Man Who Sold The World',
    duration: '3:59'
  },
  {
    id: 3,
    title: 'Starman',
    duration: '4:14'
  }
]

export const App = () => {
  return (
    <PlayerProvider>
      <Layout>
        <TrackList tracks={tracks} />
      </Layout>
    </PlayerProvider>
  )
}

Теперь в компонентах Track, PlayPause и других, где необходим доступ к текущему воспроизводимому треку, можно использовать хук usePlayer для получения текущего трека и установки нового трека без необходимости прокидывания через пропсы:

import { usePlayer } from '../context/PlayerContext';

const Track = ({ track }: { track: TrackModel }) => {
  const { currentPlayingTrack, setCurrentPlayingTrack } = usePlayer();

  // Используйте currentPlayingTrack и setCurrentPlayingTrack по необходимости
}

const PlayPause = ({ track }: { track: TrackModel }) => {
  const { currentPlayingTrack, setCurrentPlayingTrack } = usePlayer();

  // Используйте currentPlayingTrack и setCurrentPlayingTrack по необходимости
}

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

Напишите нам, если в вопросе есть ваши персональные данные (yasnoponyatno24@yandex.ru)

import { createContext, useContext, useState } from 'react';
import { TrackModel } from '../models/Track';

interface PlayerContextType {
  currentPlayingTrack: TrackModel | null;
  setCurrentPlayingTrack: (track: TrackModel | null) => void;
}

const PlayerContext = createContext<PlayerContextType>({
  currentPlayingTrack: null,
  setCurrentPlayingTrack: () => {},
});

export const usePlayer = () => useContext(PlayerContext);

export const PlayerProvider: React.FC = ({ children }) => {
  const [currentPlayingTrack, setCurrentPlayingTrack] = useState<TrackModel | null>(null);

  return (
    <PlayerContext.Provider value={{ currentPlayingTrack, setCurrentPlayingTrack }}>
      {children}
    </PlayerContext.Provider>
  );
};

import { Layout } from '../components/Layout/Layout';
import { TrackList } from '../components/TrackList/TrackList';
import { PlayerProvider } from '../context/PlayerContext';
import { TrackModel } from '../models/Track';

const tracks: TrackModel[] = [
  {
    id: 1,
    title: 'Space Oddity',
    duration: '5:15'
  },
  {
    id: 2,
    title: 'The Man Who Sold The World',
    duration: '3:59'
  },
  {
    id: 3,
    title: 'Starman',
    duration: '4:14'
  }
]

export const App = () => {
  return (
    <PlayerProvider>
      <Layout>
        <TrackList tracks={tracks} />
      </Layout>
    </PlayerProvider>
  )
}

import { usePlayer } from '../context/PlayerContext';

const Track = ({ track }: { track: TrackModel }) => {
  const { currentPlayingTrack, setCurrentPlayingTrack } = usePlayer();

  // Используйте currentPlayingTrack и setCurrentPlayingTrack по необходимости
}

const PlayPause = ({ track }: { track: TrackModel }) => {
  const { currentPlayingTrack, setCurrentPlayingTrack } = usePlayer();

  // Используйте currentPlayingTrack и setCurrentPlayingTrack по необходимости
}

ЯсноПонятно24

Пройдите быструю авторизацию для просмотра:

Пройдите быструю авторизацию для просмотра:

Последние вопросы: