通過在React JS中的ID鏈接

Question

有沒有可能在React JS中創建一個哈希鏈接？

一個具有例如這樣的事情：

<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鏈接：

<div className="nav"> 
    <a href="">Home</a> 
    <a href="#services">Services</a> 
    <a href="#contact">Contact</a> 
</div> 

而且使用jQuery的平滑滾動：

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

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

你也可以把手onClick事件滾動：

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

和功能：

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

如果你不想要使用jQuery，你可以添加refs到組件（home，services等），並將window scrollTop設置爲元素位置。

例如：

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