如何使用'間隔'與反應，從ES5轉換爲ES6

Question

我沒有看到任何相關的問題，可能已經有你的答案「研究'facebook.github.io'，但我困惑在我的情況下使用'間隔'的方式。我正在將ES5應用程序轉換爲在線課程中的ES6應用程序。所以，ES5代碼：

var React = require('react'); 
var ReactDOM = require('react-dom'); 
var GuineaPigs = require('../components/GuineaPigs'); 

var GUINEAPATHS = [ 
    'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-guineapig-1.jpg', 
    'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-guineapig-2.jpg', 
    'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-guineapig-3.jpg', 
    'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-guineapig-4.jpg' 
]; 

var GuineaPigsContainer = React.createClass({ 
    getInitialState: function() { 
    return { currentGP: 0 }; 
    }, 

    nextGP: function() { 
    var current = this.state.currentGP; 
    var next = ++current % GUINEAPATHS.length; 
    this.setState({ currentGP: next }); 
    }, 

    interval: null, 

    componentDidMount: function() { 
    this.interval = setInterval(this.nextGP, 5000); 
    }, 

    componentWillUnmount: function() { 
    clearInterval(this.interval); 
    }, 

    render: function() { 
    var src = GUINEAPATHS[this.state.currentGP]; 
    return <GuineaPigs src={src} />; 
    } 
}); 

ReactDOM.render(
    <GuineaPigsContainer />, 
    document.getElementById('app') 
); 

而且，我有什麼，到目前爲止，在ES6是：

import React from 'react' 
import GuineaPigs from './GuineaPigs'; 

const GUINEAPATHS = [ 
    'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-guineapig-1.jpg', 
    'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-guineapig-2.jpg', 
    'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-guineapig-3.jpg', 
    'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-guineapig-4.jpg' 
]; 

class GuineaPigsContainer extends React.Component { 
    constructor(props) { 
    super(props); 
    this.state = { currentGP: 0 }; 
    this.nextGP = this.nextGP.bind(this); 
    } 

    nextGP() { 
    let current = this.state.currentGP; 
    let next = ++current % GUINEAPATHS.length; 
    this.setState({ currentGP: next }); 
    } 

    setInterval() { 
    null 
    } 

} 

export default GuineaPigsContainer; 

我在尋找指點如何處理這個例子中，甚至可能指針來處理這個問題。感謝您提供的任何幫助。

Answer 1

您的ES5上面寫入ES6如下;無論如何，它是setInterval的問題或任何問題：

ES6：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import GuineaPigs from '../components/GuineaPigs'; 

var GUINEAPATHS = [ 
    'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-guineapig-1.jpg', 
    'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-guineapig-2.jpg', 
    'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-guineapig-3.jpg', 
    'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-guineapig-4.jpg' 
]; 

class GuineaPigsContainer extends React.Component { 
    constructor() { 
     super(...arguments); //⚠️Do not forget this line 
     this.state = { currentGP: 0 }; 
     this.interval = null; 
    } 


    nextGP() { 
    var current = this.state.currentGP; 
    var next = ++current % GUINEAPATHS.length; 
    this.setState({ currentGP: next }); 
    } 

    componentDidMount() { 
    this.interval = setInterval(this.nextGP, 5000); 
    } 

    componentWillUnmount() { 
    clearInterval(this.interval); 
    } 

    render() { 
    var src = GUINEAPATHS[this.state.currentGP]; 
    return <GuineaPigs src={src} />; 
    } 
} 

ES7 /巴貝爾：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import GuineaPigs from '../components/GuineaPigs'; 

var GUINEAPATHS = [ 
    'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-guineapig-1.jpg', 
    'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-guineapig-2.jpg', 
    'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-guineapig-3.jpg', 
    'https://s3.amazonaws.com/codecademy-content/courses/React/react_photo-guineapig-4.jpg' 
]; 

class GuineaPigsContainer extends React.Component { 

    // no need constructor 
    state = { currentGP: 0 }; 
    interval = null; 
// non-static methods 
    nextGP() { 
    var current = this.state.currentGP; 
    var next = ++current % GUINEAPATHS.length; 
    this.setState({ currentGP: next }); 
    } 

    componentDidMount() { 
    this.interval = setInterval(this.nextGP, 5000); 
    } 

    componentWillUnmount() { 
    clearInterval(this.interval); 
    } 

    render() { 
    var src = GUINEAPATHS[this.state.currentGP]; 
    return <GuineaPigs src={src} />; 
    } 
}