使用 react-router--dom <Link> 时如何将道具从父母传递给孙子？

Question

我将图像路径数据从父组件（TaskSubmissions.js 组件）发送到子组件（Card.js 组件）和相同的图像路径数据我想传递 Card 的子组件 CardDetail.js。

问题是数据从 TaskSubmissions.js 传递到 Card.js，但它没有从 Card.js 传递到 DetailCard.js

我正在使用 react-router-dom 。为了更好地理解它，我将分享所有三个组件代码。我会感谢你的帮助。 P.S 我是新来的反应，并试图通过这些实验来理解流程。

数据流 = 图片 URL 正在从 TaskSubmission.js 传递到 -> Card.js 到 -> DetailCard.js

父组件TaskSubmissions.js

import React from "react";
import Card from "../components/Card";

const TaskSubmissions = () => {
  return (
    <div className="container-fluid">
      <div className="row justify-content-center mt-5">
        <h1 className="text-info display-4 text-center">
          Review All Students Task!
        </h1>
      </div>

      <div className="row justify-content-center">
        <p className="lead text-center">Rate your students performance</p>
      </div>

      <div className="row justify-content-center mt-5">
        <div className="col-lg-3 col-md-4 col-sm-12">
          <Card
            name="Jane"
            path="https://source.unsplash.com/aob0ukAYfuI/400x300"
          />
        </div>
      </div>
    </div>
  );
};

export default TaskSubmissions;

子组件Card.js

import React from "react";
import { Link } from "react-router-dom";

const Card = (props) => {
  return (
    <div className="container-fluid">
      <div className="row">
        <h4 className="card-title">{props.name}</h4>
        <Link
          to={{
            pathname: "/detail",
            state: { imgpath: props.path, name: props.name },
          }}
          className="d-block mb-4 h-100"
        >
          <img
            className="img-fluid img-thumbnail"
            src={props.path}
            alt="image"
          />
        </Link>
      </div>
    </div>
  );
};
export default Card;

GrandChild 组件 CardDetail.js

import React from "react";
import { useLocation } from "react-router";

const CardDetail = (props) => {
  const data = useLocation();
  return (
    <div className="container-fluid">
      <div className="row justify-content-center">
        <div className="card mb-3">
          <img src={data.imgpath} className="card-img-top" alt="..." />
          <div className="card-body">
            <h5 className="card-title">{data.name}</h5>
            <p className="card-text">Assignment 1 is completed.</p>
            <p className="card-text">
              <small className="text-muted">Last updated 3 mins ago</small>
            </p>
          </div>
        </div>
      </div>
    </div>
  );
};

export default CardDetail;

Answer 1

尝试以不同的方式访问它。你目前正在做const data = useLocation();，然后是data.imgpath。你试过console.log(data)吗？

我建议进行以下更改：

<img src={data.state.imgpath} className="card-img-top" alt="..."/> <h5 className="card-title">{data.state.name}</h5>

既然你已经把它存储在了

{{pathname: "/detail", state: {imgpath: props.path, name: props.name}}}

所以它保存在data.state。

data 对象应如下所示：

{
  ...
  pathname: '/detail',
  state: {
    name: 'bar',
    imgpath: 'foo'
  }
}