Блог

Я работаю над сайтом электронной коммерции React, и у меня возникают трудности с отображением pdp (страницы сведений о продукте). Процесс должен заключаться в том, что всякий раз, когда пользователь нажимает на <Picture Card /> компонент, он должен открывать pdp этого продукта. Прямо сейчас, если это произойдет, мне удалось выйти из системы с именем и идентификатором каждого продукта, но я не могу отобразить его на странице pdp (я не знаю, как передать данные здесь).

Мой вопрос в том, как я могу передавать данные от <Shop /> компонента к <Pdp /> компоненту?

Заранее большое вам спасибо! Надеюсь, кто-нибудь сможет мне помочь

Моя структура кода:

 App.js
   ├── Header.js
   ├── Home.js
   ├── shop.js
            ├── PictureCard.js
   ├── Pdp.js
   ├── About.js
   └── Footer.js
 

Мой код:

Main.js

 import React from 'react'
import { Switch, Route } from 'react-router-dom'

import Home from './Home'
import Shop from './Shop'
import About from './About'
import Pdp from './Pdp'

function Main() {
    return (
        <Switch> {/* The Switch decides which component to show based on the current URL.*/}
            <Route exact path='/' component={Home}></Route>
            <Route exact path='/shop' component={Shop}></Route>
            <Route exact path='/pdp' component={Pdp}></Route>
            <Route exact path='/about' component={About}></Route>
        </Switch>
    )
}

export default Main
 

Shop.js

 import React from "react"
import PictureCard from "./PictureCard"

import profile2 from "../images/profile2.jpg"

import './Shop.css'

class Shop extends React.Component {
     constructor() {
          super()
     }

     handleClick(id, name) {
          console.log(id, name)
     }

     render() {
          return (
               <div className="shop-container">
                   <h3 className="filter-title">All pictures/</h3>
          
                   <div className="shop-grid">
                       <PictureCard
                            id="1"
                            image={profile2}
                            title="Strandhill Cannon Susnet"
                            price="20"
                            handleClick={this.handleClick}
                       />
                       <PictureCard
                            id="2"
                            image={profile2}
                            title="Bundoran in Winter"
                            price="20"
                            handleClick={this.handleClick}
                       />
                       <PictureCard
                            id="3"
                            image={profile2}
                            title="Mullaghmore Runner"
                            price="20"
                            handleClick={this.handleClick}
                       />
                   </div>
               </div>
           )
     }
}

export default Shop;
 

PictureCard.js

 import React from "react"

import "./PictureCard.css"

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

class PictureCard extends React.Component {
    constructor() {
        super()
    }

    render() {
        return(
            <div className="picure-card-container" onClick={() => this.props.handleClick(this.props.id, this.props.title)}>
                <Link to="/pdp" className="no-dec">
                    <img src={this.props.image} className="picture-card-image"></img>
                    <h6 className="picture-card-title">{this.props.title}</h6>
                    <p className="picture-card-price">€ {this.props.price}</p>
                </Link>
            </div>
        )
    }
}

export default PictureCard
 

Pdp.js

 import React from "react"

import profile2 from "../images/profile2.jpg"

import './Pdp.css'

class Pdp extends React.Component {
     constructor() {
          super()
     }
     

     render() {
          return (
               <div className="pdp-page">
                   <h3 className="filter-title">All pictures/{this.props.title}</h3>
                   <div className="pdp-container">
                       <div>
                            Hello
                       </div>
                   </div>
               </div>
           )
     }
}

export default Pdp;
 

Вы можете создавать динамические маршруты для страницы pdp следующим образом

 <Route path="/pdp/:productId" component={Pdp}/>
 

Затем в компоненте PictureCard создайте ссылки типа

 <Link to=`/pdp/${this.props.id}`>
 

Внутри компонента pdp вы должны получить идентификаторы, подобные этому.props.match.params.ProductID.

Затем, используя этот идентификатор, вы можете вызвать свой API, чтобы получить все сведения о продукте, которые будут показаны на странице.