Javascript 如何使用React路由将状态从父组件传递到子组件？

我在React电子商务网站上工作，我很难向pdp展示我需要的所有字段。这个过程应该是，每当用户单击

组件时，它都应该打开该产品的pdp。现在我得到一个错误： src\components\Main.js 第14:128行：未定义“productData”无未定义

我只想传递我的

{this.props.match.params.productTitle}
€{this.state.price}
{this.props.description}
购买
)
}
}
导出默认Pdp；

如果您直接使用道具，则需要定义道具并对其进行分解：

    function Main(props) {
        const {parentCallback} = props;
        return (
            <Switch> {/* The Switch decides which component to show based on the current URL.*/}
                <Route exact path='/' render = {(props) => (<Home parentCallback={parentCallback} {...props}/>)}/>
                <Route exact path='/shop' render = {(props) => (<Shop parentCallback={parentCallback} {...props}/>)}/>
                <Route exact path='/pdp/:productTitle' render = {(props) => (<Pdp parentCallback={parentCallback} productData={productData} {...props}/>)}/>{/*problem here! why?*/}
                <Route exact path='/about' render = {(props) => (<About parentCallback={parentCallback} {...props}/>)}/>
            </Switch>
        )
    }

主功能（道具）{
const{parentCallback}=props；
返回(
{/*开关根据当前URL决定显示哪个组件。*/}
()}/>
()}/>
（）}/>{/*这里有问题！为什么？*/}
()}/>
)
}

正如前面所指出的，您的渲染将被调用。因此，函数中的props参数（route props）将传递给组件，而不是外部声明的props。您需要提供额外的道具，以便您的组件能够访问：

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(props) {
        return (
            <Switch> {/* The Switch decides which component to show based on the current URL.*/}
                <Route exact path='/' render = {(routeProps) => (<Home {...props} {...routeProps} />)}/>
                <Route exact path='/shop' render = {(routeProps) => (<Shop {...props} {...routeProps} />)}/>
                <Route exact path='/pdp/:productTitle' render = {(routeProps) => (<Pdp {...props} {...routeProps} />)}/>
                <Route exact path='/about' render = {(routeProps) => (<About {...props} {...routeProps} />)}/>
            </Switch>
        )
    }
        
export default Main

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

---

fwiw由于您传递的道具与组件中的道具同名，您不需要对其进行分解，您只能直接传播道具

看起来您忘记了在此行的Main函数定义中添加

productData

prop:

function Main（{parentCallback}）{

这是一个未定义的错误是的…你是对的@SunilChaudhary。非常感谢你的帮助！

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.*/}
                <Route exact path='/' render = {(props) => (<Home parentCallback={parentCallback} {...props}/>)}/>
                <Route exact path='/shop' render = {(props) => (<Shop parentCallback={parentCallback} {...props}/>)}/>
                <Route exact path='/pdp/:productTitle' render = {(props) => (<Pdp parentCallback={parentCallback} productData={productData} {...props}/>)}/>{/*problem here! why?*/}
                <Route exact path='/about' render = {(props) => (<About parentCallback={parentCallback} {...props}/>)}/>
            </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.handleClick = this.handleClick.bind(this)
     }

     handleClick(id, name, price, description, image) {
          console.log(id, name, price, description, image)
          this.props.parentCallback(id, name, price, description, 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}
                       />
                   
                   </div>
               </div>
           )
     }
}

export default Shop;

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(props) {
          super(props)
          this.state = {
               price: this.props.productData
          }
     }
     
     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">€ {this.state.price}</p>
                            <p className="pdp-info-paragraph">{this.props.description}</p>
                            <button className="purchase-button">Purchase</button>
                       </div>
                   </div>
               </div>
           )
     }
}

export default Pdp;

    function Main(props) {
        const {parentCallback} = props;
        return (
            <Switch> {/* The Switch decides which component to show based on the current URL.*/}
                <Route exact path='/' render = {(props) => (<Home parentCallback={parentCallback} {...props}/>)}/>
                <Route exact path='/shop' render = {(props) => (<Shop parentCallback={parentCallback} {...props}/>)}/>
                <Route exact path='/pdp/:productTitle' render = {(props) => (<Pdp parentCallback={parentCallback} productData={productData} {...props}/>)}/>{/*problem here! why?*/}
                <Route exact path='/about' render = {(props) => (<About parentCallback={parentCallback} {...props}/>)}/>
            </Switch>
        )
    }

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(props) {
        return (
            <Switch> {/* The Switch decides which component to show based on the current URL.*/}
                <Route exact path='/' render = {(routeProps) => (<Home {...props} {...routeProps} />)}/>
                <Route exact path='/shop' render = {(routeProps) => (<Shop {...props} {...routeProps} />)}/>
                <Route exact path='/pdp/:productTitle' render = {(routeProps) => (<Pdp {...props} {...routeProps} />)}/>
                <Route exact path='/about' render = {(routeProps) => (<About {...props} {...routeProps} />)}/>
            </Switch>
        )
    }
        
export default Main