0

У меня есть проект, в котором сверху находится navbar и аудиоплеер,в навбаре есть 3 ссылки одна из которых ведет на страницу со списком песен, проблема заключается в том, что аудиоплеер сделан как отдельный функциональный компонент и рендерится в навбаре, но мне нужно при нажатии на одну из песен, которые находятся в другом функциональном компоненте, передавать в аудиоплеер объект метаданных песни, вопрос в том как это сделать? я не могу импортировать и вставить аудиоплеер для того чтобы передать значения с помощью props, потому что он уже есть в навбаре

код навбара

import React from 'react'
import './Navbar.css'
import { Nav } from 'react-bootstrap';
import { NavLink } from 'react-router-dom'
import { AudioPlayer } from './AudioPlayer';

const Navbar: React.FC = () => {

  return (
<>
    <Nav activeKey="/home" >
     
      <Nav.Item >
        <Nav.Link eventKey="link-1" ><NavLink to='/'>Квесты</NavLink></Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link eventKey="link-2" ><NavLink to='/photos'>Фотографии</NavLink></Nav.Link>
      </Nav.Item>
      <Nav.Item>
        <Nav.Link eventKey="link-3"><NavLink to='/music'>Музыка</NavLink></Nav.Link>
      </Nav.Item>
      <AudioPlayer />
    </Nav>
    
</>
  )

}

export default Navbar

код самого плеера

import React, { useState } from 'react'
import ReactAudioPlayer from 'react-audio-player';



export const AudioPlayer: React.FC = () => {



return (

    <ReactAudioPlayer
        //  src="https://firebasestorage.googleapis.com/v0/b/multitask-510cc.appspot.com/o/music%2F6.DSCHINGHIS%20KHAN%20%20-%20MOSCAU.mp3?alt=media&token=ce8f8066-c101-4a75-a98f-e1858bc3a07a"
        autoPlay={true}
        controls
        id='audioPlayer'

    />
)

}

3

0

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Посмотрите другие вопросы с метками или задайте свой вопрос.