使用React解析道具和功能

Question

所以在制作我的投资组合时，我在这里有一个小问题。 我正在尝试在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>
        )
    }
}

有人可以清除所有内容吗，因为我试图理解整个道具，但是我还是不明白。

Answer 1

在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)} />