滚动在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> 
    ); 
} 

在这个道具的孩子，我想浏览的章节。它们是：

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]返回未定义。如果点击标题中的联系人链接，则该函数中的参数标识为contact，但找不到this.refs["contact"]，因为它位于某个其他组件中。

有什么建议吗？

Answer 1

您可以使用道具传递函数并用作兄弟组件之间进行通信的手段。

你可以使用“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

同时要引用正确