在 React JS 中使用另一個組件內的組件導航

Question

這是我放在另一個名為（主頁）的組件中的組件（legalbanner）。 每次我點擊“贊助商或法律”時，我都會收到錯誤 TypeError: this.props.onRouteChange is not a function

class Legalbanner extends Component {


    moveToSponsors = () =>{ this.props.onRouteChange ('sponsors');}
    moveToLegal = () =>{ this.props.onRouteChange ('legal');}

    

    render() {
        return ( 

                <div>
                    <Container className="bannerLegal">
                        <Row fluid="md">
                            <Col md={4}><p className="bottomBannerInfo">Copyright © 2021 Red Lodge FC Inc. All rights reserved. </p></Col>
                            <Col md={1}><p className="bottomBannerInfo" onClick={this.moveToSponsors}>Sponsors </p></Col>
                            <Col md={2}><p className="bottomBannerInfo" onClick={this.moveToLegal}> Terms and Conditions</p></Col>
                            <Col md={5}><p className="bottomBannerInfo">website created by Freelance web developer </p></Col>
                        </Row>
                    </Container>
                </div>
            );
        }
    }

export default Legalbanner;

主頁里面的代碼

class Homepage extends Component {

    moveToFixtures = () =>{ this.props.onRouteChange ('fixtures');}
    moveToClubinfo = () =>{ this.props.onRouteChange ('clubinfo');}
    moveToContact = () =>{ this.props.onRouteChange ('contact');}
    moveToGallery = () =>{ this.props.onRouteChange ('gallery');}
    moveToTheteam = () =>{ this.props.onRouteChange ('theteam');}

    state = {
    chartImageURI: ""
            }

    render() {
            return (
                <div>
                    <Row style={{height:'100%'}}>
                        <Col md className="clubInfoBox"  onClick={this.moveToClubinfo}> <p className="a">CLUB INFORMATION</p>  </Col>
                        <Col md className="clubInfoBox1"  onClick={this.moveToTheteam} ><p className="a">THE TEAM</p> </Col>
                        <Col md className="clubInfoBox"  onClick={this.moveToFixtures}><p className="a">MATCH FIXTURES</p></Col>
                    </Row>
                        <Row style={{height:'90%'}}> 
                            <Col md={6} className="clubInfoBox1" style={{height:'40%'}} onClick={this.moveToGallery}><p className="a">GALLERY</p></Col>
                            <Col md={6} className="clubInfoBox"  style={{height:'50%'}} onClick={this.moveToContact}><p className="a">CLUB CONTACT DETAILS</p></Col>
                        </Row>

                <Sponsorbanner/>

                <Legalbanner/>
                
                </div>
            );
        }
    }
export default Homepage;

我可以毫無問題地瀏覽此頁面。

由於該網站設置為單頁應用程序，因此我使用 App 進行路由。

  import '../App.css';
  class App extends React.Component { 
      constructor (props){
      super(props)
      this.state = {route: 'homepage'} 
     
      }

      onRouteChange = (newRoute)=>{
      this.setState({route:newRoute});
      }

        moveToClubinfo = () =>{ this.onRouteChange ('clubinfo');}
        moveToFixtures = () =>{ this.onRouteChange ('fixtures');}
        moveToContact = () =>{ this.onRouteChange ('contact');}
        moveToHomepage = () =>{ this.onRouteChange ('homepage');}
        moveToSponsors = () =>{ this.onRouteChange ('sponsors');}
        moveToGallery = () =>{ this.onRouteChange ('gallery');}
        moveToTheteam = () =>{ this.onRouteChange ('theteam');}
        moveToLegal = () =>{ this.onRouteChange ('legal');}
        moveToLegalbanner = () =>{ this.onRouteChange ('legalbanner');}

        render() {

             const{route} = this.state;

             return (
                  <div >

                        <Container  fluid className="topPage">
                        <Row>
                        <Col sm={1} md={1} lg={1} ><img src={require('../images/RedLodgeLogo.jpg').default} alt="" className="redlodgefclogo"/></Col>
                        <Col sm={1} md={1} lg={1}><img src={require('../images/redLodgeFootball.png').default} alt="" className="redlodgefc"/></Col>
                        <Col sm={10} md={10} lg={10}>
                        <Row sm={12}md={12} lg={12} className="TopRow"><p className="findUs" > find us on </p>
                        <SocialIcon url="https://www.facebook.com/RedLodgeYouthFC/" network="facebook" className="SocialMedia"  />
                        <SocialIcon url="https://twitter.com/LodgeUnder" network="twitter"  className="SocialMedia"/>
                        <SocialIcon url="https://www.instagram.com/redlodgeyouthfc/" network="instagram"  className="SocialMedia" />
                        </Row>
                        <Row sm={12}md={12} lg={12} className="bottomRow">
                        <p className="menuBand" onClick={this.moveToClubinfo}>Club Information</p>
                        <p className="menuBand" onClick={this.moveToTheteam}>The Team</p>
                        <p className="menuBand" onClick={this.moveToFixtures}>Match Fixtures</p>
                        <p className="menuBand" onClick={this.moveToGallery}>Gallery</p>
                        <p className="menuBand" onClick={this.moveToContact}>Club Contact Details</p>
                        <p className="menuBand" onClick={this.moveToHomepage}><BsFillHouseFill /></p>
                        </Row>
                        </Col>
                        </Row>
                        </Container>





                  
{ route ==='homepage'? <Homepage onRouteChange = {this.onRouteChange}/> : <div></div>}
{ route ==='fixtures'? <Fixtures onRouteChange = {this.onRouteChange}/> : <div></div>}
{ route ==='clubinfo'?<Clubinfo onRouteChange = {this.onRouteChange}/> : <div></div>}
{ route ==='contact'? <Contact onRouteChange = {this.onRouteChange}/> : <div></div>}
{ route ==='sponsors'?<Sponsors onRouteChange = {this.onRouteChange}/> : <div></div>}
{ route ==='gallery'?<Gallery onRouteChange = {this.onRouteChange}/> : <div></div>}
{ route ==='theteam'?<Theteam onRouteChange = {this.onRouteChange}/> : <div></div>}
{ route ==='legal'?<Legal onRouteChange = {this.onRouteChange}/> : <div></div>}



{ route ==='legalbanner'?<Legalbanner onRouteChange = {this.onRouteChange}/> : <div></div>}


                  </div>    
              );
          }
      }
  export default App;

Answer 1

Legalbanner未在Homepage組件中傳遞onRouteChange道具：

<Legalbanner />

您還應該將onRouteChange道具處理程序傳遞給Legalbanner組件。

<Legalbanner onRouteChange={this.props.onRouteChange} />