javascript - React JS 中通过 id 链接

Question

是否有可能在 React JS 中创建哈希链接？

A 例如有这样的东西:

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

如果用户单击服务，我希望他转到 id 为 services 的页面部分。 .

有什么建议吗？

更新

应用程序组件代码(主要组件):

<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>
    );
}

所有部分都在 Home 组件中，并且 Home 组件在

中呈现

{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，您可以向组件(主页、服务等)添加引用，并将窗口的滚动顶部设置为元素位置。

例如:

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