отреагировать хуки - как отобразить одно изображение массива - PullRequest
Новая
       10

отреагировать хуки - как отобразить одно изображение массива

0 голосов
/ 12 марта 2020

Следующий код производит: Список исполнителей

Первые JS исполнители файлов. js I map () через массив объектов из ловушки useState (), которая создает список исполнителей, но теперь как я могу создать onClick, который будет показывать только детали выбранного исполнителя? когда я выполняю console.log (), я получаю данные об исполнителе, на которого щелкнул, но, более того, я не могу отобразить это на странице подробностей. js страница, с которой связан onClick. Пожалуйста, может кто-нибудь помочь.

(артисты. js) 

import React, { useContext } from "react";
import { Link } from "../components/Router";
import { ArtistContext } from "../ArtistContext";

const Artists = () => {
  const [artists, setArtists] = useContext(ArtistContext);
  return (
    <div className="container-fluid">
      <div className="row mt-5">
        {artists.map(artist => (
          <div className="col-10 col-lg-4 mx-auto mt-5 mb-5" key={artist.id}>
            <div className="card" style={{ width: "18rem" }}>
              <img
                src={artist.img}
                alt={artist.headerTitle}
                style={{ width: "100%", height: "250px" }}
                className="card-img-top"
              />
              <div className="card-body">
                <h3 className="card-title text-uppercase">
                  {artist.headerTitle}
                </h3>
                <h5 className="card-title">{artist.headerSubTitle}</h5>
                <p className="card-text">{artist.headerText}</p>
                <Link
                  to="/details"
                  className="btn btn-outline-primary text-uppercase"
                  onClick={() => console.log(artist)}
                >
                  Gallery
                </Link>
              </div>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};
export default Artists;

(подробности. js) 

import React, { useContext } from "react";

import { ArtistContext } from "../ArtistContext";

const Details = props => {
  const [artists, setArtists] = useContext(ArtistContext);

  return <div className="container-fluid">{artist.title}</div>;
};
export default Details;

1 Ответ

0 голосов
/ 12 марта 2020

Поскольку вы используете <Link/> для монтирования деталей, вы можете передать идентификатор исполнителя в маршрут и получить доступ к исполнителю, сопоставив идентификатор из useContext в подробностях. js

В художников. js

      <Link
          to={"/details/" + artist.id}
          className="btn btn-outline-primary text-uppercase"
          onClick={() => console.log(artist)}
        >

На основе используемого вами маршрутизатора я могу ответить, как получать параметры в дочернем элементе ( подробнее. js).

...