Javascript 如何在React中使用scrollIntoView？

我正在尝试使用标题中的链接，通过scrollIntoView滚动到我的应用程序的不同部分。标题是应用程序的子级。我得到一个TypeError，表示我试图保存id的变量未定义。有人能帮我确定我做错了什么吗？我想我可能必须使用ComponentDidMount，但我不确定如何使用它，如果这是修复方法的话。我将不得不这样做与我所有的标题链接

//错误 bundle.js:152未捕获类型错误：无法读取的属性“scrollIntoView” 无效的 位于App.getScrollLocations（bundle.js:152） AtOnClick（bundle.js:19957） 位于Object.ReactErrorUtils.invokeGuardedCallback（bundle.js:4660） 在executeDispatch（bundle.js:4460） 在Object.executeDispatchesInoder（bundle.js:4483） 在executeDispatchesAndRelease（bundle.js:3913） 在executeDispatchesAndReleaseTopLevel（bundle.js:3924） 在Array.forEach（）处 在Foreach（bundle.js:4760） 在Object.processEventQueue（bundle.js:4129） ///////

//应用程序

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
this.closeModal=this.closeModal.bind（this）；
this.openModal=this.openModal.bind（this）；
this.getScrollLocations=this.getScrollLocations.bind（this）；
此.state={
开：错，
项目：服务，
所选项目：服务[0]
}
}
关闭模式（事件）{
this.setState（{open:false}）；
}
OpenModel（项目）{
这是我的国家({
开放：是的，
所选项目：项目
});
}
/////////////滚动功能//////////////
getScrollLocations（）{
const whatIDo=document.getElementById（'.whatIDo'）；
console.log（whatIDo）
whatIDo.scrollIntoView（）；
}
render（）{
常数显示={
显示：“块”
};
常数隐藏={
显示：“无”
};
返回(
///////////////我的目标是什么/////////////////
);
}
}

//标题

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>
  )
}

const头=（道具）=>{
控制台日志（道具）；
返回(
XXXXXXX XXXXXXX

介绍
props.getScrollLocations（）}
>我做什么
我是谁
我的作品
接触

)
}

我在react中使用了以下模块来实现这一点：

它的工作原理与您在页面锚定链接中预期的一样，可以与react router一起使用而不会出现问题

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;

从“React”导入React；
从“道具类型”导入道具类型；
从“需要时滚动到视图”导入scrollIntoViewIfNeeded；
/*
滚动到视图中
目的：
此模块化组件支持哈希链接
例如（www.xyz.com/somepage#someID）
和react router 4玩得很好
用法：
将此组件包装在具有ID的单个div周围
例子：
... 大量的内容。。。
*/
类ScrollIntoView扩展了React.Component{
componentDidMount（）{
this.scroll（）；
}
componentDidUpdate（）{
this.scroll（）；
}
卷轴（）{
const{id}=this.props；
//console.log（'ID为：'+ID）；
如果（！id）{
返回；
}
const元素=document.querySelector（id）；
if（元素）{
//这只是跳转到元素
//见支持：
//scrollIntoView（{block:“end”，behavior:“smooth”}）；
//如果Firefox。。。
if（navigator.userAgent.indexOf（“Firefox”）>0）{
//…使用本机平滑滚动。
scrollIntoView（{block:“end”，behavior:“smooth”}）；
//如果是任何其他浏览器，请使用自定义多边形填充。。。
}否则{
//…幸运的是我有这个方便的塑料填充物。。。
ScrollIntoViewIfRequired（元素，false{
持续时间：150
});
//  (⌐■_■
}
}
}
render（）{
返回此.props.children；
}
}
ScrollIntoView.propTypes={
id:PropTypes.string.isRequired，
儿童：PropTypes.oneOfType([
需要PropTypes.array.isRequired，
PropTypes.object.isRequired
])
};
导出默认滚动视图；

下面是一个正在实施的示例：

---

好的，我会试试这个。谢谢。这个文件是什么：从“需要时滚动到视图”导入scrollIntoViewIfNeeded；？这是一个模块，用于检测正在呈现页面的浏览器是否本地支持ScrollIntoView，如果浏览器不支持ScrollIntoView，则该模块不执行任何操作，如果用户不支持ScrollIntoViews浏览器，此模块提供了一个多边形填充以启用该功能。有关此模块的更多文档：浏览器对ScrollIntoView的支持：啊，好的。再次感谢。

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;