javascript - React-Scroll 在 ES6 上有问题

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不是一个函数

在文档中，我看到以下 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 中的 destructing 之类的方法来“提取”单个方法方法离开对象进入当前范围(就像我上面所做的那样)。

有关 JS 中导入工作原理的更多信息:https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Statements/import