如何在React中使用scrollIntoView？

Question

我想在我的头中使用链接滚动到我的应用程序的不同部分与scrollIntoView。标题是App的一个孩子。我得到一个TypeError，说我试图保存id的变量是未定义的。有人可以帮助我确定我做错了什么吗？我想我可能不得不使用ComponentDidMount，但我不知道如何去做，如果这是修复。我将不得不这样做我的所有标题链接。

//错误 bundle.js：152遗漏的类型错误：在App.getScrollLocations无法读取属性 'scrollIntoView' 空 的（bundle.js：152） 在的onClick（bundle.js：19957） 的对象.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（） at 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

我用下面的模块来达致这在反应：

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