使用ES6有問題的react-scroll

Question

我正在使用react-scroll但在文檔中它正在使用ES5

到目前為止，我的代碼如下

import React, {Component} from 'react';
import Scroll from 'react-scroll';

class Footer extends Component {

  constructor(props) {
    super(props);
  }

  scrollToTop() {
    scroll.scrollToTop();
  }

  render() {
    return (
      <footer id='footer' className="container-fluid">
        <a className="black-link" id="toTop" onClick={this.scrollToTop}>
          <div className="dotted-line"></div>
          <i className="fa fa-chevron-up" aria-hidden="true"></i>
          Back to Top
        </a>
      </footer>
    );
  }
}

export default Footer;

但是我收到TypeError: scroll.scrollToTop is not a function

在文檔中，我看到了以下var但是我不確定要如何處理它們，因為ES6非常新

var Link       = Scroll.Link;
var Element    = Scroll.Element;
var Events     = Scroll.Events;
var scroll     = Scroll.animateScroll;
var scrollSpy  = Scroll.scrollSpy;

Answer 1

嘗試使用此命令導入scroll功能（用第二行替換）：

import {animateScroll as scroll} from 'react-scroll';

react-scroll模塊使用所有方法導出對象。

導入默認值時，將獲得此對象。 您可以使用單獨使用這些方法. 運算符（例如： Scroll.animateScroll() ），也可以在ES6中使用諸如析構之類的方法將單個方法從對象中“提取”到當前作用域中（如我上面所做的那樣）。

有關導入如何在JS中工作的更多信息： https : //developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import