offsetTopの入手方法

Question

私はreactを使用してoffsetTopを取得し、それらの値をreduxストアに追加しようとしています。次のように

私のコンポーネントは次のとおりです。

export const refs = { 
    home: "home", 
    whyUs: "whyUs", 
    concessionAutohandle: "concessionAutohandle", 
    performance: "performance", 
    benefits: "benefits", 
    whoAreWe: "whoAreWe", 
    contact: "contact" 
}; 

class HomePage extends React.Component { 

    componentDidMount(){ 
     let offsets = { 
      [refs.home]: this.refs[refs.home].offsetTop, 
      [refs.whyUs]: this.refs[refs.whyUs].offsetTop, 
      [refs.concessionAutohandle]: this.refs[refs.concessionAutohandle].offsetTop + 300, 
      [refs.performance]: this.refs[refs.performance].offsetTop, 
      [refs.benefits]: this.refs[refs.benefits].offsetTop, 
      [refs.whoAreWe]: this.refs[refs.whoAreWe].offsetTop, 
      [refs.contact]: this.refs[refs.contact].offsetTop 
     }; 

     this.props.actions.addOffsets(offsets); 

    } 

    render(){ 
     const languageHome = this.props.currentLanguage.default; 

     return (
      <div className="homeMain" ref={refs.home}> 
       <section className="marginOnXs" style={{width: '100%', padding: 0}}> 
        <MainSlider /> 
       </section> 

       <section id="whyUs" ref={refs.whyUs} className="why-us" style={{paddingTop: 0, paddingBottom: 0}}> 
        <Info currentLanguage={languageHome} /> 
       </section> 


       <section id="concessionAutohandle" ref={refs.concessionAutohandle} className="" style={{paddingTop: 0, paddingBottom: 0}}> 
        <ConcessionAutohandle currentLanguage={languageHome}/> 
       </section> 

       <div className="clearfix"></div> 

       <section id="performance" ref={refs.performance} className="" style={{paddingTop: 0, paddingBottom: 0}}> 
        <Performance currentLanguage={languageHome}/> 
        <div className="clearfix"></div> 
       </section> 

       <div className="clearfix"></div> 

       <section id="benefits" ref={refs.benefits} className="benefits noPadding"> 
        <Benefits currentLanguage={languageHome} authenticated={this.props.authenticated}/> 
        <div className="clearfix"></div> 
       </section> 

       <section id="whoAreWe" ref={refs.whoAreWe} className="whoAreWe noPadding"> 
        <WhoAreWe currentLanguage={languageHome} /> 
        <div className="clearfix"></div> 
       </section> 

       <section id="contactSection" name="contact" className="contactSection" ref={refs.contact}> 
         <ContactForm currentLanguage={languageHome}/> 
       </section> 
      </div> 
     ); 
    } 
} 

function mapStateToProps(state, ownProps) { 
    return {}; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
     actions: bindActionCreators(actions, dispatch) 
    }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(HomePage); 

ページ初めてのロード、すべての作業罰金。これらの値は正しいです。

私の場合、新しいルート、登録ページに移動すると問題が発生します。 （offsetTopは420である）ページのといないの

1. 登録ページ上の焦点は途中でどこかにある：私は登録ページに移動するリンクをクリックすると

   は、私は2つの問題を抱えていますトップになるように

2. 私は、ホームページに戻るために、ロゴをクリックすると、componentDidMountのそれらの値が正しくない、それらの値が以前の値よりもほぼ2倍高くなります。それは正しくない、彼らは同じである必要があります。

私も、問題は同じであるビット、offsetTopを取得するためにcomponentDidMountでlet rectCollection = object.getClientRects();てみました。

アドバイスはありますか？

Answer 1

offsetロジックを関数として割り当て、componentDidUpdate()とcomponentWillReceiveProps()でその関数を呼び出します。以下のようなもの

function setOffset() { 
    let offsets = { 
      [refs.home]: this.refs[refs.home].offsetTop, 
      [refs.whyUs]: this.refs[refs.whyUs].offsetTop, 
      [refs.concessionAutohandle]: this.refs[refs.concessionAutohandle].offsetTop + 300, 
      [refs.performance]: this.refs[refs.performance].offsetTop, 
      [refs.benefits]: this.refs[refs.benefits].offsetTop, 
      [refs.whoAreWe]: this.refs[refs.whoAreWe].offsetTop, 
      [refs.contact]: this.refs[refs.contact].offsetTop 
     }; 

     this.props.actions.addOffsets(offsets); 
} 

componentDidMount(){ 
this.setOffset() 
} 

componentWillReceiveProps(){ 
this.setOffset() 
}