Как передать реквизит от родителя к внуку при использовании response-router - dom <Link>? - PullRequest
Новая
       173

Как передать реквизит от родителя к внуку при использовании response-router - dom <Link>?

4 голосов
/ 06 августа 2020

Я отправляю данные пути изображения из родительского компонента (компонент TaskSubmissions. js) в дочерний компонент (компонент Card. js) и те же данные пути изображения. Я хочу передать дочерний компонент Card, который является CardDetail. js .

Проблема в том, что данные передаются из TaskSubmissions. js в Card. js, но не передаются с Card. js в DetailCard. js

Я использую response-router-dom . Чтобы лучше понять это ниже, я делюсь кодом всех трех компонентов. Буду признателен за вашу помощь. PS Я новичок в реакции и пытаюсь понять поток с такими экспериментами.

Data Flow = URL изображения передается из TaskSubmission. js to -> Card. js to -> 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 Component 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;

1 Ответ

1 голос
/ 06 августа 2020

Попробуйте получить к нему доступ другим способом. Сейчас вы делаете 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'
  }
}
...