javascript - 在 React JS 中滚动

Question

有没有办法在 React JS 的点击事件中创建滚动动画而不 JQuery？

我有一个导航，我想根据用户点击的内容转到某个页面部分。我想用一些动画来做到这一点。

问题是导航和部分不在同一个文件中。

我在主要组件中有这样的东西:

render() {
    return (
        <div>
            <Header currentLanguage={this.props.language.labels}/>
            {React.cloneElement(this.props.children, {
                currentLanguage: this.props.language.labels
            })}
            <Footer currentLanguage={this.props.language.labels}/>
        </div>
    );
}

在此 props 中，子项是我想要导航的部分。他们是:

return (
            <div className="homeMain">
                <section ref="home" className="marginOnXs">
                    <MainSlider />
                </section>
                <section id="performance" ref="performance">
                    <Performance currentLanguage={languageHome}/>
                </section>
                <section id="benefits" ref="benefits">
                    <Benefits currentLanguage={languageHome} />
                </section>
                 <section ref="contact" id="contact">
                        <ContactForm currentLanguage={languageHome}/>
                 </section>
            </div>
        );

内部标题我有这样的东西:

<ul className="noPadding">
     <li> <Link to="" onClick={this.handleScroll.bind(this, "home")}>Home </Link></li>
     <li> <Link to="" onClick={this.handleScroll.bind(this, "contact")}>Contact?</Link></li>
 </ul>

在句柄滚动中我尝试了类似的操作:

handleScroll(id, event){
    event.preventDefault();
    let test = ReactDom.findDOMNode(this.refs[id]);
    let scrollTop = event.target.body.scrollTop,
    itemTranslate = Math.min(0, scrollTop/3 - 60);
    window.scrollTo(0, itemTranslate);
}

但这行不通。 this.refs[id] 返回未定义。如果点击 header 中的 contact 链接，函数中的参数 id 是 contact，但找不到 this.refs["contact"]，因为它在某些其他组件。

有什么建议吗？

Answer 1

您可以使用 props 来传递函数并用作兄弟组件之间通信的手段。

您可以在根组件中使用“this.props.handleScroll”，并将要滚动到的 id 传递给子组件。类似这样的东西，

    <ul className="noPadding">
      <li> <Link to="" onClick={this.props.handleScroll.bind(this, "home")}>Home </Link></li>
      <li> <Link to="" onClick={this.props.handleScroll.bind(this, "contact")}>Contact?</Link></li>
    </ul>

   <-- In your root component --->
    <Header currentLanguage={this.props.language.labels} handleScroll={::this.handleScroll}} />

    handleScroll(id, event) {
      this.setState({
        scrollToId: id
      })
    }

    render() {
        return (
            <div>
                <Header currentLanguage={this.props.language.labels}/>
                {React.cloneElement(this.props.children, {
                    currentLanguage: this.props.language.labels,
                    scrollToId: this.state && this.state.scrollToId
                })}
                <Footer currentLanguage={this.props.language.labels}/>
            </div>
        );
    }

    <-- In your child component -->

    componentDidUpdate() {
      const idToScroll = this.props.scrollToId;
      // you can access this.refs[idToScroll] here and get the 
      // scrollheight and scroll to the position of the element
    }

    return (
          <div className="homeMain">
              <section ref="home" className="marginOnXs">
                  <MainSlider />
              </section>
              <section id="performance" ref="performance">
                  <Performance currentLanguage={languageHome}/>
              </section>
              <section id="benefits" ref="benefits">
                  <Benefits currentLanguage={languageHome} />
              </section>
               <section ref="contact" id="contact">
                      <ContactForm currentLanguage={languageHome}/>
               </section>
          </div>
    );

我认为您应该仔细阅读此内容，以便更好地了解码件之间的通信，React.js - Communicating between sibling components以及 React.js - Communicating between sibling components 的答案