javascript - 如何在 React 中使用 scrollIntoView？

Question

我正在尝试使用标题中的链接通过 scrollIntoView 滚动到我的应用程序的不同部分。 header 是 App 的子项。我收到一个 TypeError，说我试图将 id 保存到的变量未定义。有人可以帮我确定我做错了什么吗？我想我可能不得不使用 ComponentDidMount，但我不确定该怎么做，如果这甚至是修复的话。我将不得不对所有标题链接执行此操作。

//错误 bundle.js:152 Uncaught TypeError: 无法读取属性 'scrollIntoView' 的 无效的 在 App.getScrollLocations (bundle.js:152) 在 onClick (bundle.js:19957) 在 Object.ReactErrorUtils.invokeGuardedCallback (bundle.js:4660) 在 executeDispatch (bundle.js:4460) 在 Object.executeDispatchesInOrder (bundle.js:4483) 在 executeDispatchesAndRelease (bundle.js:3913) 在 executeDispatchesAndReleaseTopLevel (bundle.js:3924) 在 Array.forEach() 在 forEachAccumulated (bundle.js:4760) 在 Object.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

我使用以下模块在 React 中实现了这一点:

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

它的工作原理与您使用页内 anchor 链接所期望的一样，并且可以毫无问题地与 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;

这是一个实际的例子: https://anthonycregan.co.uk/portfolio