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中的destruct来将对象中的单个方法“提取”到当前范围内（就像我上面所做的那样。）

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

反应滚动与ES6有问题

1 个答案: