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

这里需要调用的功能等等，链接是元素的引用。

这是我的导航栏

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

在PIL组件中，将App属性更改为：

onClickFunction

在onClickFunction={this.blah}组件中，像这样更改Navbar：

Navitem

使用React解析道具和功能

1 个答案: