通过在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); 
}