idで要素にスクロールしていません

Question

私はReactを使用しており、ハッシュ変更後にアンカーリンクがリンクされるはずの少し過去をスクロールしようとしています。

は私がmade a codesandbox here.

The answer provided hereが動作するはず持っていますが、何らかの理由でそうではありません。私はどこに間違っているかもしれないか誰にでも見えますか？ scrollToId関数が呼び出されますが、何らかの理由で目的の場所にスクロールしません。

const Page =() => { 

    let scrollToId =() => { 

     if(location.hash.length !== 0) { 

      window.scrollTo(window.scrollX, window.scrollY + 200); 

     } 

    } 

    window.addEventListener("hashchange", scrollToId); 

    return (
     <div> 
      <a href="#one">Link</a> 
      <p id="one">One</p> 
     </div> 
    ); 

} 

Answer 1

これは適切な場所ではありません。コンポーネントを動作させるには、コンポーネントにイベントハンドラが必要です。それ以外の場合は、すべてrenderメソッドで同じaddEventListenerイベントを複数回初期化します。

import React, { Component } from 'react' 

export default class YourComponent extends Component { 
    constructor(props) { 
    super(props) 

    this.handleScroll = this.handleScroll.bind(this) 
    } 

    componentDidMount() { 
    window.addEventListener('hashchange', this.handleScroll) // Initialize your listener 
    } 

    componentWillUnmount() { 
    window.removeEventListener('hashchange', this.handleScroll) // Remove your listener 
    } 

    handleScroll() { 
    if (window.location.hash.length !== 0) { 
     window.scrollTo(window.scrollX, window.scrollY + 200) 
    } 
    } 

    render() { 
    return (
     <div> 
     <a href="#one">Link</a> 
     <p id="one">One</p> 

     <div style={{ height: 900 }} /> 

     <div style={{ backgroundColor: 'red', width: 600, height: 100 }}> 
      Content 
     </div> 
     </div> 
    ) 
    } 
}