Javascript 如何在React.JS中将数据从子组件传递到父组件？

我在React电子商务网站上工作，我很难向pdp显示我需要的所有字段（标题（ok）、价格（NO）、描述（NO）、图像（NO））。这个过程应该是，每当用户单击

组件时，它都应该打开该产品的pdp。现在，如果发生这种情况，我设法在页面中显示标题，并且我可以正确地注销所有需要的字段，但我无法使其显示在pdp页面上（我不知道如何在此处传递数据）

我正在考虑提升父组件的状态（

{this.props.match.params.productTitle}
欧元价格{this.props.price}
描述{this.props.description}

购买
)
}
}
导出默认Pdp；

试试这个

        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({parentCallback}) {
            return (
                <Switch> {/* The Switch decides which component to show based on the current URL.*/}

 //Please try this thing hope it will works
                    <Route exact path='/'  
         render={(props)=>
    (<Home parentCallback={parentCallback} 
    {...props}/>
         )}/>


 <Route  exact path='/shop'  
         render={(props)=>
    (<Shop parentCallback={parentCallback} 
    {...props}/>
         )}/>

    <Route  path='/pdp/:productTitle'
         render={(props)=>
    9<Pdp parentCallback={parentCallback} 
    {...props}/>
         )}/>

 <Route exact path='/about'
         render={(props)=>
    (<About parentCallback={parentCallback} 
    {...props}/>
         )}/>
                </Switch>
            )
        }
        
        export default Main

从“React”导入React
从“react router dom”导入{交换机，路由}
从“./主页”导入主页
从“./Shop”导入店铺
从“./About”导入关于
从“./Pdp”导入Pdp
函数Main（{parentCallback}）{
返回(
{/*开关根据当前URL决定显示哪个组件。*/}
//请试试这个东西，希望它能起作用
(
)}/>
(
)}/>
9
)}/>
(
)}/>
)
}
导出默认主

只要使用redux，在任何地方传递数据都会容易得多。

parentCallback

被传递到

Main

但是

Main

没有转发到

Shop

@GabrielePetrioli我认为这很好，因为路由是如何工作的，但实际上我并不清楚。我应该在主要组件上添加什么才能使其工作？谢谢你的回答！现在我再也没有收到错误消息了，但我仍然无法按照我的意愿更新UI。如何将描述、价格和图像字段作为道具传递到pdp上查看它们？再次感谢！！尝试在handleCallback=（childData）=>{alert（childData）this.setState（{data:childData}）中添加警报，是的，它可以工作！警报工作正常，我将childData更改为我感兴趣的字段（id、标题、描述、价格、图像），但仍然没有显示在pdp中。为什么？我认为我正确地将其传递给pdp，对吗？是的。现在您只需传递一个“来自子对象的数据”，就可以传递其他参数并进入父文件中的函数

import React from "react"
import Header from "./components/Header"
import Main from "./components/Main"
import Footer from "./components/Footer"

import './App.css';

class App extends React.Component {
  constructor() {
    super()
    this.state = {
      data: null
    }
  }

  handleCallback = (childData) => {
    this.setState({
      data: childData
    })
  }

  render() {
    return (
      <div className="App">
          <Header />
          <Main parentCallback = {this.handleCallback}/>
          <Footer />
      </div>
    )
  }
  
}

export default App

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 path='/pdp/:productTitle' component={Pdp}></Route>
            <Route exact path='/about' component={About}></Route>
        </Switch>
    )
}

export default Main

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

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

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

import './Shop.css'

class Shop extends React.Component {
     constructor() {
          super()
          this.state = {
               productId: "",
               productTitle: "",
               productPrice: "",
               productDescription: "",
               productImage: ""
          }
          this.handleClick = this.handleClick.bind(this)
     }

     handleClick(id, name, price, description, image) {
          console.log(id, name, price, description, image)
          this.props.parentCallback("Data from child") //this is wrong ? why ?
          //getting the error TypeError: this.props.parentCallback is not a function

          
          /* this.setState({
               productId: id,
               productTitle: name,
               productPrice: price,
               productDescription: description,
               productImage: image
          }) */
     }
     

     render() {
          return (
               <div className="shop-container">
                   <h3 className="filter-title"><Link to="/shop" className="no-dec">All pictures</Link></h3>
                   
                
                   <div className="shop-grid">
                       <PictureCard
                            id="1"
                            image={profile2}
                            title="Strandhill Cannon Susnet"
                            price="20"
                            description="Colourful sunset at the cannon of Strandhill during lockdown"
                            handleClick={this.handleClick}
                       />
                       <PictureCard
                            id="2"
                            image={profile2}
                            title="Bundoran in Winter"
                            price="20"
                            description="Snowy mountains view behind Bundoran colourful houses"
                            handleClick={this.handleClick}
                       />
                       <PictureCard
                            id="3"
                            image={profile2}
                            title="Mullaghmore Runner"
                            price="20"
                            description="Being active during lockdown in County Sligo"
                            handleClick={this.handleClick}
                       />
                       
           
                   </div>
               </div>
           )
     }
}

export default Shop;

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, this.props.price, this.props.description, this.props.image)}>
                <Link to = {`/pdp/${this.props.title}`} 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

import React from "react"

import profile2 from "../images/profile2.jpg"
import { Link } from "react-router-dom"

import './Pdp.css'

class Pdp extends React.Component {
     constructor() {
          super()
     }
     
     render() {
          return (
               <div className="pdp-page">
                   <h3 className="filter-title">
                        <Link to="/shop" className="no-dec">All pictures</Link> <span>&#8250;</span> <a href="" className="no-dec">{this.props.match.params.productTitle}</a>
                    </h3>
                   <div className="pdp-container">
                       <div>
                            <img src={this.props.image} className="pdp-image"></img>
                       </div>
                       <div className="pdp-info-container">
                            <h3 className="pdp-title">{this.props.match.params.productTitle}</h3>
                            <p className="pdp-info-paragraph">€ price {this.props.price}</p>
                            <p className="pdp-info-paragraph">description {this.props.description}</p>
                            <button className="purchase-button">Purchase</button>
                       </div>
                   </div>
               </div>
           )
     }
}

export default Pdp;

        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({parentCallback}) {
            return (
                <Switch> {/* The Switch decides which component to show based on the current URL.*/}

 //Please try this thing hope it will works
                    <Route exact path='/'  
         render={(props)=>
    (<Home parentCallback={parentCallback} 
    {...props}/>
         )}/>


 <Route  exact path='/shop'  
         render={(props)=>
    (<Shop parentCallback={parentCallback} 
    {...props}/>
         )}/>

    <Route  path='/pdp/:productTitle'
         render={(props)=>
    9<Pdp parentCallback={parentCallback} 
    {...props}/>
         )}/>

 <Route exact path='/about'
         render={(props)=>
    (<About parentCallback={parentCallback} 
    {...props}/>
         )}/>
                </Switch>
            )
        }
        
        export default Main