React JS内でスクロール

Question

JQueryを使用しないで、React JS のクリックイベントでスクロールしてアニメーションを作成する方法はありますか？

私はナビゲーションがあり、クリックしたユーザーに応じてページセクションに移動したいと考えています。そして私はいくつかのアニメーションでそれをしたいです。

問題は、ナビゲーションとセクションが同じファイルにないことです。

私が主成分で、このようなものがあります。この中で

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]は未定義です。ヘッダーの連絡先リンクをクリックすると、関数内のパラメーター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