React와 함께 '간격'을 ES5에서 ES6으로 변환 할 때

Question

'이미 답변이있는 질문'에 관련 내용이 없으며 'facebook.github.io'를 조사했지만 내 경우에는 '간격'을 어떤 방법으로 사용하는지 혼란스러워합니다. ES5 응용 프로그램을 온라인 클래스의 ES6 응용 프로그램으로 변환하고 있습니다. 그래서, ES5 코드입니다 : 내가 ES6에서, 지금까지 무엇을,

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') 
); 

그리고 것은 :

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에 기록됩니다.

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/바벨 : 어쨌든 그것은 setInterval을 문제 또는 문제는

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} />; 
    } 
}