从 ES5 转换为 ES6 时，我如何使用 'interval' 和 React

Question

我没有在 "Questions That May Already Have Your Answer" 中看到任何相关内容并研究了 'facebook.github.io'，但我对在我的情况下使用 'interval' 的方式感到困惑。我正在在线 class 中将 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} />;
  }
}

从 ES5 转换为 ES6 时，我如何使用 'interval' 和 React

How Do I Use 'interval' With React, When converting From ES5 To ES6

javascript

intervals

setinterval

reactjs

es6-class

ES6 :

ES7/巴别塔：