[英]Parsing props and functions with React
所以在制作我的投資組合時,我在這里有一個小問題。 我正在嘗試在App.js中觸發一個函數,但是單擊子項時必須觸發該函數。 這是我的App.js
class App extends Component {
introref = React.createRef()
timelineref = React.createRef()
projectref = React.createRef()
skillsref = React.createRef()
certifref = React.createRef()
downloadref = React.createRef()
blah = (link) => {
scrollToComponent(this.link, { duration: 1600 })
}
render() {
return (
<div className="App">
<Route path="/textversion" component={TextVersion} />
<Route path="/contact" component={Contact} />
<Navbar introref={this.introref}
timelineref={this.timelineref}
projectsref={this.projectsref}
skillsref={this.blah.bind(this, this.skillsref)}
certifref={this.certifref}
downloadref={this.downloadref}
onClickFunction={this.blah.bind(this, this.props.onClickFunction)}
/>
<Title content="I am Tristan Vermeesch" />
<hr />
<Bio />
<Introduction ref={this.introref} />
<Timeline ref={this.timelineref} />
<Projects ref={this.projectsref} />
<Skills ref={this.skillsref} />
<Certificates ref={this.certifref} />
<Download ref={this.downloadref} />
</div>
)
}
}
這里需要調用的功能是blah,link是元素的ref。
這是我的導航欄
class Navbar extends Component {
render() {
const { introref, timelineref, projectsref, skillsref, certifref, downloadref } = this.props
return (
<div className="navbar" >
<Link to="/textversion" className="link">Text Version</Link>
<Link to="/contact" className="link">Contact</Link>
<Navitem dName={"Resume"} onClickFunction={this.downloadref} />
<Navitem dName={"Certificates"} onClickFunction={this.certifref} />
<Navitem dName={"Skills"} onClickFunction={this.skillsref} />
<Navitem dName={"Projects"} onClickFunction={this.projectsref} />
<Navitem dName={"Life"} onClickFunction={this.timelineref} />
<Navitem dName={"Me"} onClickFunction={this.introref} />
</div>
)
}
}
這是navitem,應觸發onClick功能的項目
class navitem extends Component {
render() {
return (
<div>
<div className="navItem" onClick={this.props.onClickFunction}>
{this.props.dName}
</div>
</div>
)
}
}
有人可以清除所有內容嗎,因為我試圖理解整個道具,但是我還是不明白。
在App
組件中,將onClickFunction
更改為:
onClickFunction={this.blah}
在Navbar
組件中,如下所示更改Navitem
:
<Navitem dName={"Resume"} onClickFunction={this.props.onClickFunction.bind(this, downloadref)} />
<Navitem dName={"Certificates"} onClickFunction={this.props.onClickFunction.bind(this, certifref)} />
<Navitem dName={"Skills"} onClickFunction={this.props.onClickFunction.bind(this, skillsref)} />
<Navitem dName={"Projects"} onClickFunction={this.props.onClickFunction.bind(this, projectsref)} />
<Navitem dName={"Life"} onClickFunction={this.props.onClickFunction.bind(this, timelineref)} />
<Navitem dName={"Me"} onClickFunction={this.props.onClickFunction.bind(this, introref)} />
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.