我想将SingerBox.js中的name变量传递给Album组件,以便我可以显示艺术家的专辑。当我打印props.name时,它是未定义的。如何正确通过?
SingerBox.js
import React, { Component } from "react";
import Modal from "react-bootstrap/Modal";
import ImageNotFound from "../../ImageNotFound.jpg";
import "../../App.css";
import { Link } from "react-router-dom";
import Albums from "../Albums/Albums";
const SingerCard = (props) => {
const { images, name, artists } = props;
//check if the image array is empty since some artists' image data provided by the API call are empty
const singer_img = images.length === 0 ? ImageNotFound : images[0].url;
return (
<>
<Link to="/albums" onClick={() => <Albums name={name} />}>
<div className="box">
<div>
<img className="singer-img" src={singer_img} alt="Card image" />
{name}
</div>
</div>
</Link>
</>
);
};
export default SingerCard;
Albums.js
import React, { Component } from "react";
const Albums = (props) => {
return <div style={{ color: "white" }}> {`${props.name}'s albums`}</div>;
};
export default Albums;
结果是“未定义的相册”。
答案 0 :(得分:0)
在您的情况下,您尝试通过 react-router-dom 通过<Link>
传递变量。因此,我假设您想在<Routes>
之间传递变量。
您可以使用 URL参数或查询参数在路由之间传递变量。
URL参数示例:
https://reacttraining.com/react-router/web/example/url-params
查询参数示例:
https://reacttraining.com/react-router/web/example/query-parameters
我写了一个URL Paramater示例供您参考:
https://codesandbox.io/s/react-query-param-example-1ol6u
祝你好运。
答案 1 :(得分:0)
您可以做@YingHua回答中提到的事情,您可以做的另一件事如下所示。
OnClick您可以调用一个函数,并且可以从该函数重定向数据。
this.props.history.push({
pathname: '/somewhere',
state: { fromDashboard: true }
});