反應滾動有問題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 is not a function

在文檔中，我看到下面的var s，但我不確定如何處理它們，因爲我用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