如何将变量从一个组件传递到另一个组件？

Question

我想将 SingerBox.js 中的 name 变量传递给 Album 组件，以便显示艺术家的专辑。 当我打印 props.name 时，它是未定义的。 如何正确通过？

歌手盒子.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;

相册.js

import React, { Component } from "react";

const Albums = (props) => {
  return <div style={{ color: "white" }}> {`${props.name}'s albums`}</div>;
};

export default Albums;

结果是“未定义的专辑”。

Answer 1

在您的情况下，您尝试使用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 参数示例供您参考：
https://codesandbox.io/s/react-query-param-example-1ol6u

祝你好运。

Answer 2

你可以做@YingHua 在回答中提到的事情，你可以做的另一件事如下所示。

OnClick 你可以调用一个 function 并且从那个 function 你可以用数据重定向。

 this.props.history.push({
     pathname: '/somewhere',
      state: { fromDashboard: true }
    });