0
React JSでハッシュリンクを作成する可能性はありますか?IDでReact JSでリンクする
Aは、このような例のために何かを持っている:
<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);
}
:
問題は、NAVコードとそれらのセクションが同じファイルに含まれていないということです。そして、 'item'は空です。 – Boky
あなたの問題を正しく理解しているかどうかわかりません...メニューにリンクされているメニューとdivは1ページに表示されていますか? – marcint339
質問が更新されました。 – Boky