单击 React.js 将数据传递给另一个组件答案

【问题标题】：Passing data to another component on click React.js单击 React.js 将数据传递给另一个组件
【发布时间】：2021-04-01 09:34:32
【问题描述】：

我正在尝试将我点击的卡片的特定 ID 传递给另一个组件，以在另一个页面中显示它自己的卡片

import useFetchData from "./useFetchData";
import { Card,Row,Col, Container,CardGroup,Button } from 'react-bootstrap';
import { Link } from "react-router-dom/cjs/react-router-dom.min"
import Lyrics from "./LyricsFinder";


const Tracks = () => {

const {data,Load}=useFetchData();

return ( 
    <Container>
                {Load && <div>Loading...</div>} 
        {!Load && <h2 style={{ textAlign:"center",marginBottom:"25px" }} >Top 5 songs on the Bilboard this weak</h2>}
    <div className="tracks">
        <CardGroup>
        {data.map(info =>(
                    <div key={info.track.track_id}>
           <Card style={{ width: '30rem' }} key={info.track.track_id}>
            <Card.Body>
            <Card.Title>{info.track.track_name}</Card.Title>
            <Card.Text>  {info.track.artist_name} </Card.Text>
            </Card.Body>
            <Card.Footer variant="mx-auto ">
                 <Link to="/lyrics" className="btn btn-primary">Sign up</Link> // here where I want to click
       
            </Card.Footer>
            
            </Card>
        </div>
         ))
        }</CardGroup>
    </div>
    </Container>
     );
     }

  export default Tracks;

我想将卡片的 id 传递给我点击时要去的组件

你能告诉我怎么做吗？！

【问题讨论】：

通过 props 传递id，保存id 状态并使用onClick 处理程序更新它
如何在中传递 props ??
参考this

标签： javascript reactjs api onclick react-props

【解决方案1】：

您可以将id作为参数传递，

<Link to={'/lyrics/' + id} className="btn btn-primary">Sign up</Link>

现在接收歌词组件，从 react-router-dom

导入 useParams

import { useParams } from "react-router-dom";

现在，

const { id } = useParams();

【讨论】：

您是否在路径上设置了参数？路径：“/lyrics/:id”