IDでReact JSでリンクする

Question

React JSでハッシュリンクを作成する可能性はありますか？

Aは、このような例のために何かを持っている：

<div className="nav"> 
    <Link to="">Home</Link> 
    <Link to="#services">Services</Link> 
    <Link to="#contact">Contact</Link> 
</div> 

そして、私は彼がID servicesとページのセクションに行くことにするサービスをユーザーがクリックする場合。

アドバイスはありますか？

UPDATE

アプリケーションコンポーネントコード（主成分）：

<div> 
    <Header route={this.props.location.pathname} 
      language={this.props.language.labels} 
      authenticated={this.props.authenticated} 
      signoutAction={this.props.actions} 
    /> 
    {React.cloneElement(this.props.children, { 
      currentLanguage: this.props.language.labels, 
      authenticated: this.props.authenticated 
    })} 
    <Footer currentLanguage={this.props.language.labels}/> 
</div> 

ヘッダ成分：

<ul className="noPadding"> 
    <li style={{paddingTop: 20}}> <a href="">Home </a></li> 
    <li style={{paddingTop: 20}}> <a href="">Kenmerken </a></li> 
    <li style={{paddingTop: 20}}> <a href="">Voordelen </a></li> 
    <li style={{paddingTop: 20}}> <Link to="" onClick={this.handleScroll.bind(this, "whoAreWe")}>Wie zijn wij?</Link></li> 
    <li style={{paddingTop: 20}}> <a href="#contact">Contact </a></li> 
    <li style={{paddingTop: 20}}> <MainButton text="Aanmelden"/></li> 
</ul> 

ホーム成分：

render(){ 
    const languageHome = this.props.currentLanguage.default.homePage; 
    let loginBox = !this.props.authenticated ? (<div id="cta-1" className="onlyOnDesktop"><Login currentLanguage={languageHome}/></div>) : ""; 

    return (
     <div className="homeMain"> 
      <section className="marginOnXs" style={{width: '100%', padding: 0}}> 
       <MainSlider /> 
      </section> 

      <section className="why-us" style={{paddingTop: 0, paddingBottom: 0}}> 
       <Info currentLanguage={languageHome}/> 
      </section> 

      <div className="clearfix"></div> 

      <section className="benefits noPadding"> 
       <Benefits currentLanguage={languageHome} /> 
       <div className="clearfix"></div> 
      </section> 

      <section ref="whoAreWe" id="whoAreWe" className="whoAreWe noPadding"> 
       <WhoAreWe currentLanguage={languageHome} /> 
       <div className="clearfix"></div> 
      </section> 
     </div> 
    ); 
} 

すべてのセクションでは、ホーム・コンポーネントであり、ホームコンポーネントは

{React.cloneElement(this.props.children, { 
     currentLanguage: this.props.language.labels, 
     authenticated: this.props.authenticated 
})} 

ハンドルスクロール機能でレンダリング：私は、コンソールに何を参照してくださいこと

handleScroll(id, event){ 
    event.preventDefault(); 
    const item = ReactDOM.findDOMNode(this.refs[id]); 
    window.scrollTo(item.offsetTop); 
} 

：

Answer 1

私がより良いと思います方法は簡単なHTMLリンクを作成することです：

あなたがしたくない場合は

handleScroll(id){ 
    $('html, body').animate({ 
     scrollTop: $('#' + id).offset().top 
    }, 500);   
} 

：

<div className="nav"> 
    <Link onClick={this.handleScroll.bind(this, 'home')}>Home</Link> 
    <Link onClick={this.handleScroll.bind(this, 'services')}>Services</Link> 
    <Link onClick={this.handleScroll.bind(this, 'contact')}>Contact</Link> 
</div> 

と機能：また、onClickイベントでのスクロール処理することができます

$('.nav a').on('click', function(event){ 
    event.preventDefault(); 

    $('html, body').animate({ 
     scrollTop: $($.attr(this, 'href')).offset().top 
    }, 500); 
}); 

を：

とスムーズなスクロールのためのjQueryを使用jQueryを使用するには、コンポーネント（家庭、サービスなど）にrefを追加し、window scrollTopを要素の位置に設定します。例えば

：

handleScroll(id){ 
    const item = ReactDOM.findDOMNode(this.refs[id]); 
    window.scrollTo(item.offsetTop); 
}