时间戳

首页 > 解决方案 > Reactjs，将数据（id）从一个组件传递到另一个组件以下载歌曲

javascript - Reactjs，将数据（id）从一个组件传递到另一个组件以下载歌曲

问题描述

嗨，我是 Reactjs 的新手，我正在练习一个音乐网站的项目。但是有一个问题我被困住了。好吧，有一个歌曲页面，我应该在其中显示一些歌曲卡。

import React from 'react'
import SongCard from '../components/SongCard';
import { songsList } from '../components/songsList';

//this is first object of the songsList file which i hard coded instead of using api:

export const songsList =[
{
    id : 1,
    url : './components/Player/Songs/Homayoun Shajarian - Souvashoun.mp3',
    image : require('../assets/Souvashoun.jfif').default,
    name : 'x',
    singer : 'y',
    style :'z',
    lyrics :'v',
    source : './Palyer/Songs/Homayoun Shajarian - Souvashoun.mp3'


}];

export default function Songs() {
    return(
        <div>
        <SongCard className='col-md-6' id={songsList[0].id} image={songsList[0].image} name={songsList[0].name} singer={songsList[0].singer}/><br/>
        <SongCard className='col-md-6' id={songsList[1].id} image={songsList[1].image} name={songsList[1].name} singer={songsList[1].singer}/><br/>
        <SongCard className='col-md-6' id={songsList[2].id} image={songsList[2].image} name={songsList[2].name} singer={songsList[2].singer}/><br/>
        </div>
        );
}

在我将附上下面代码的 SongCard 中，有一个按钮旨在将我们路由到 downloadMusic 页面，以便下载单击该按钮的特定歌曲：

import React from 'react'
import {Card, Button} from 'react-bootstrap';
import styled from 'styled-components';
import {BrowserRouter as Router} from 'react-router-dom';

function SongCard(props){ 
    const id = this.props.id;
    this.props.history.push({
     pathname: '/downloadMusic',
    search: '?query=downloadMusic',
    state: { data: id }
    })

    return(
        
    <Styles>
    <Router>
    <Card style={{ width: '18rem'}} className="cardbg shadow" text="white">
      <Card.Img variant="top" src={props.image} className="img-fluid" />
      <Card.Body className="text-center">
        <Card.Title>آهنگ {props.name}</Card.Title>
        <Card.Text>خواننده {props.singer}
        </Card.Text>
        
        
        <Button  href="/DownloadMusic/:id" className="btn btn-outline-dark">go to download page</Button>
        
           
      </Card.Body>
    </Card> 
    </Router>
    </Styles>
    
);
}
export default SongCard;

最后，这是下载音乐的最后一页。这里还应该有一张卡片，其中包含有关特定歌曲和最终下载按钮的信息。

import React from 'react';
import { songsList } from './songsList';
import DownloadCard from './DownloadCard';
import AudioPlayer from './Player/AudioPlayer';

function DownloadMusic() {
    const id = this.props.location.state.data;
     const song = songsList.find(item => item.id === id);

    return(
        <div>
        <DownloadCard className='col-md-6' id= {song.id} image={song.image} name={song.name} singer={song.singer}/><br/>
        <AudioPlayer/>

        </div>
        );
}

export default DownloadMusic;

我想要的是发送在歌曲页面中单击的特定歌曲的 id 和 url，下载音乐页面并在卡片中显示歌曲列表中的信息。我已经尝试了很多方法，比如使用 state、useParams()，......但没有一个对我有用。另外我不想发送整个道具，因为我知道这不是最佳做法。那么我做错了什么？

希望我已经分享了足够的信息。任何帮助表示赞赏。

标签： javascriptreactjs

解决方案

可以在歌卡页面创建这样的功能

 const onSongCardClick = () => {
        history.push({
            pathname: '/downloadMusic',
              state: {id: this.props.id, url: this.props.url} 
          })
    }
...
...
<Button onclick="onSongCardClick()" className="btn btn-outline-dark">go to download page</Button>

并通过以下方式在下载音乐页面中获取这些值

 const { id, url } = this.props.location.state

还将 url 作为道具从歌曲页面传递给歌曲卡

推荐阅读