Javascript 如何使用'；间隔'；当从ES5转换到ES6时，使用React

我在“可能已经有你的答案的问题”和“facebook.github.io”中没有看到任何相关内容，但我不知道在我的案例中如何使用“interval”。我正在在线课程中将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')
);

---

我正在寻找关于如何处理这个例子的指针，甚至可能是关于这个主题的文档指针。感谢您提供的帮助。

您上面的ES5已写入ES6，如下所示；无论如何，这是设置间隔问题或任何问题：

ES6：

从“React”导入React；
从“react dom”导入react dom；
从“../components/GuineaPigs”导入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'
];
类GuineAppgContainer.Component{
构造函数（）{
超级（…参数）//⚠️别忘了这句话
this.state={currentGP:0}；
this.interval=null；
}
nextGP（）{
var current=this.state.currentGP；
var next=+当前%guineAppaths.length；
this.setState（{currentGP:next}）；
}
componentDidMount（）{
this.interval=setInterval（this.nextGP，5000）；
}
组件将卸载（）{
clearInterval（这个.interval）；
}
render（）{
var src=GUINEAPATHS[this.state.currentGP]；
返回；
}
}

ES7/Babel：

从“React”导入React；
从“react dom”导入react dom；
从“../components/GuineaPigs”导入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'
];
类GuineAppgContainer.Component{
//不需要构造函数
状态={currentGP:0}；
间隔=空；
//非静态方法
nextGP（）{
var current=this.state.currentGP；
var next=+当前%guineAppaths.length；
this.setState（{currentGP:next}）；
}
componentDidMount（）{
this.interval=setInterval（this.nextGP，5000）；
}
组件将卸载（）{
clearInterval（这个.interval）；
}
render（）{
var src=GUINEAPATHS[this.state.currentGP]；
返回；
}
}

完全用同样的方法做怎么样？使用完全相同的

componentDidMount

和

componentWillUnmount

？您丢失了构造函数。现在-您丢失了

super（）

，并且在

super

中不需要

…参数。不知道你所说的ES7是什么意思：-SES7。。现在查看更新的答案以了解差异
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;

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

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