Question

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

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

我正在使用react-router-dom 。为了更好地理解下面的内容，我将共享所有三个组件代码。多谢您的协助。附言：我是新来的反应者，并试图通过这样的实验来了解流程。

数据流 =图片网址从 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'
  }
}

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

1 个答案: