如何在兄弟组件 React 之间传递数据？

Question

我正在 React 电子商务网站上工作，但在显示 pdp（产品详细信息页面）时遇到困难。该过程应该是每当用户单击 <Picture Card /> 组件时，它应该打开该产品的 pdp。现在，如果发生这种情况，我设法注销了每个产品的名称和 ID，但我无法使其显示在 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;

Answer 1

您可以像这样为 pdp 页面创建动态路由

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

然后在 PictureCard 组件中，创建如下链接

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

在 pdp 组件中，您应该得到像 this.props.match.params.productId.

这样的 ID

然后使用此 ID，您可以调用您的 API 以获取要在页面中显示的所有产品详细信息。

如何在兄弟组件 React 之间传递数据？

How to pass data between sibling components React?

javascript

e-commerce

reactjs