Javascript 如何在同级组件之间传递数据？

我在React电子商务网站工作，在显示pdp（产品详细信息页面）时遇到困难。这个过程应该是，每当用户单击

组件时，它都应该打开该产品的pdp。现在，如果发生这种情况，我设法注销了每个产品的名称和id，但我无法将其显示在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

从“React”导入React
从“react router dom”导入{交换机，路由}
从“./主页”导入主页
从“./Shop”导入店铺
从“./About”导入关于
从“./Pdp”导入Pdp
函数Main（）{
返回(
{/*开关根据当前URL决定显示哪个组件。*/}
)
}
导出默认主

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;

从“React”导入React
从“/PictureCard”导入PictureCard
从“./images/profile2.jpg”导入profile2
导入“./Shop.css”
类。组件{
构造函数（）{
超级（）
}
handleClick（id、名称）{
console.log（id、名称）
}
render（）{
返回(
所有图片/
)
}
}
出口默认商店；

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

从“React”导入React
导入“/PictureCard.css”
从“反应路由器dom”导入{Link}
类PictureCard扩展了React.Component{
构造函数（）{
超级（）
}
render（）{
返回(
this.props.handleClick（this.props.id，this.props.title）}>
{this.props.title}
€{this.props.price}
)
}
}
导出默认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;

从“React”导入React
从“./images/profile2.jpg”导入profile2
导入“./Pdp.css”
类Pdp扩展了React.Component{
构造函数（）{
超级（）
}
render（）{
返回(
所有图片/{this.props.title}
你好
)
}
}
导出默认Pdp；

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

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

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

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

在pdp组件内部，您应该获得如下ID.props.match.params.productId

---

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

欢迎使用StackOverflow！！所以或者将状态提升到父组件，或者使用上下文api，或者使用状态管理库。。。。不要把你的整个申请都发布给我们来完全解决你的问题。谢谢@adirabargil的评论。我还考虑将状态引入父组件，但我在这样做时遇到了困难。你能给我解释一下吗？谢谢你的回答。当你说我可以调用我的API时，我不完全理解你的最后一点。你能告诉我怎么做吗？谢谢