Question

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

例如，有这样的事情：

<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，可以将refs添加到组件（home，services等）并将window scrollTop设置为元素位置。

例如：

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

在React JS中通过id链接

1 个答案: