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> 

그리고 나는 그가 아이디 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를 사용하려면 구성 요소 (집, 서비스 등)에 대한 참조를 추가하고 window scrollTop을 요소 위치로 설정할 수 있습니다. 예를 들어

:

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