ReactでscrollIntoViewを使用するには？

Question

私はscrollIntoViewで私のアプリケーションの異なる部分にスクロールするために私のヘッダーのリンクを使用しようとしています。ヘッダーはAppの子です。私はIDを保存しようとしている変数が未定義であるというTypeErrorを取得しています。誰かが私が間違っていることを判断するのを手伝ってくれますか？私はComponentDidMountを使用しなければならないかもしれないと思うが、もしそれが修正されたとしても、どうやってそれを行うのかは分からない。私はすべての私のヘッダーリンクでこれを行う必要があります。オブジェクトの ：のonClick（19957 bundle.js）で

// bundle.js ERROR：152キャッチされない例外TypeErrorは：App.getScrollLocationsのプロパティを読み取ることができません ヌル の 'のscrollIntoView'（152 bundle.js） .ReactErrorUtils.invokeGuardedCallback（bundle.js：4660）executeDispatchで （bundle.js：4460）Object.executeDispatchesInOrderで （bundle.js：4483）executeDispatchesAndReleaseで （bundle.js：3913）executeDispatchesAndReleaseTopLevelで （bundle.js ：3924） at Array.forEach（） forEachAccumulated（bundle.js：4760） at Obje ct.processEventQueue（bundle.js：4129） ///////

//アプリケーション

class App extends Component { 
    constructor(props) { 
    super(props); 

    this.closeModal = this.closeModal.bind(this); 
    this.openModal = this.openModal.bind(this); 
    this.getScrollLocations = this.getScrollLocations.bind(this); 

    this.state = { 
     open: false, 
     projects: Service, 
     selectedProject: Service[0] 
    } 
    } 

    closeModal(event) { 
    this.setState({open: false}); 
    } 

    openModal(project) { 
    this.setState({ 
     open: true, 
     selectedProject: project 
    }); 
    } 
    ///////////// scroll function ////////////// 
    getScrollLocations() { 
    const whatIDo = document.getElementById('.whatIdo'); 
    console.log(whatIDo) 
    whatIDo.scrollIntoView(); 
    } 

    render() { 
    const show = { 
     display: 'block' 
    }; 
    const hide = { 
     display: 'none' 
    }; 
    return (
     <div> 
     <div style={this.state.open === false ? hide : show}> 
      <Modal 
      value={this.state.open} 
      closeModal={this.closeModal} 
      project={this.state.selectedProject} 
      /> 
     </div> 
     <Header 
      //////////// FUNCTION PASSED TO HEADER /////////////// 
      getScrollLocations={this.getScrollLocations} 
     /> 
     <Intro /> 
     /////////////// ELEMENT I AM TARGETING ///////////////// 
     <WhatIDo id="whatIDo" /> 
     <WhoIAm /> 
     <Gallery 
      value={this.state.open} 
      projects={this.state.projects} 
      openModal={this.openModal} 
     /> 
     <Contact /> 
     <Footer /> 
     </div> 
    ); 
    } 
} 

//ヘッダー

const header = (props) => { 
    console.log(props); 
    return (
    <div className="header"> 
     <div className="header-name"> 
     XXXXXXX XXXXXXX 
     </div> 

     <div className="header-links"> 
     <ul> 
      <li>Intro</li> 
      <li 
      ///////////// FUNCTION CALL ON CLICK ///////////////// 
      onClick={() => props.getScrollLocations()} 
      >What I do</li> 
      <li>Who I am</li> 
      <li>My Work</li> 
      <li>Contact</li> 
     </ul> 
     </div> 
    </div> 
) 
} 

Answer 1

私はこれをacheiveするには、以下のモジュールを使用中には反応：

https://www.npmjs.com/package/scroll-into-view-if-needed

それはあなたが私を使用して期待通り多くの作品nページのアンカーリンクがあり、問題なく反応ルータで使用できます。ここで

import React from 'react'; 
import PropTypes from 'prop-types'; 

import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed'; 

/* 
SCROLL INTO VIEW 

Purpose: 
    This modular component enables hash links 
    eg. (www.xyz.com/somepage#someID) 
    and plays nice with react router 4 

Usage: 
    Wrap this component around a single div with an ID 

Example: 
    <ScrollIntoView id={this.props.location.hash}> 
    <div id="someID"> 
     ... loads of content... 
    </div> 
    </ScrollIntoView> 

    <a href="/somepage#someID"> IN-PAGE ANCHOR </a> 

*/ 

class ScrollIntoView extends React.Component { 


    componentDidMount() { 
    this.scroll(); 
    } 

    componentDidUpdate() { 
    this.scroll(); 
    } 

    scroll() { 
    const { id } = this.props; 
    //console.log('ID is: '+id); 
    if (!id) { 
     return; 
    } 
    const element = document.querySelector(id); 
    if (element) { 
     // this just jumps to the element 
     // see support: 
     //element.scrollIntoView({block: "end", behavior: "smooth"}); 

     //If Firefox... 
     if (navigator.userAgent.indexOf("Firefox") > 0) { 
     //...use native smooth scrolling. 
     element.scrollIntoView({block: "end", behavior: "smooth"}); 
     // If its any other browser, use custom polyfill... 
     }else{ 
     //... luckily I have this handy polyfill... 
     scrollIntoViewIfNeeded(element, false, { 
      duration: 150 
     }); 
     // (⌐■_■ 
     } 
    } 
    } 

    render() { 
    return this.props.children; 
    } 
} 
ScrollIntoView.propTypes = { 
    id: PropTypes.string.isRequired, 
    children: PropTypes.oneOfType([ 
    PropTypes.array.isRequired, 
    PropTypes.object.isRequired 
    ]) 
}; 
export default ScrollIntoView; 

はアクションでその一例です： https://new.anthonycregan.co.uk/portfolio