[英]navigating with a component inside another component in React JS
这是我放在另一个名为(主页)的组件中的组件(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;
Legalbanner
未在Homepage
组件中传递onRouteChange
道具:
<Legalbanner />
您还应该将onRouteChange
道具处理程序传递给Legalbanner
组件。
<Legalbanner onRouteChange={this.props.onRouteChange} />
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.