react.js如何换球's每秒钟上课一次

react.js How to change the ball's class every seconds?

本文关键字:一次 每秒钟 js 何换球 react      更新时间:2023-09-26
  1. 我刚开始学习react.js。我想在每秒钟内改变球的等级吗?一秒钟是"开",另一秒钟是是"关">
  2. 我正在尝试使用setInterval,但出现错误Error: Invariant Violation: EzLampComp.render(): A valid ReactComponent must be returned.
  3. 我的代码在这里。如何解决

ez灯样式:

.ez-lamp{
  display : inline-block;
  margin : 5px;
  width : 30px;
  height : 30px;
  border-radius : 50%;
}
.ez-lamp.on{
  opacity : 1;
  background : -webkit-radial-gradient(30% 30%,white 5%,red 95%);
}
.ez-lamp.off{
  opacity : 0.5;
  background : -webkit-radial-gradient(30% 30%,#888 5%,red 95%);
}

Ezlamp组件:

var EzLampComp = React.createClass({
  render : function(){
    var onoff = this.props.onoff;                   
    setInterval(function(){
      if(onoff="on")
      return <span className = "ez-lamp off"></span>; 
      else
      return <span className = "ez-lamp off"></span>; 
    },1000);                                    
  }
});
ReactDOM.render(
  <EzLampComp onoff="on"/> , //JSX
  document.querySelector("#content"));

setInterval应该从componentDidMount调用,并且应该只切换状态。

getInitialState() {
  return {
    onoff: this.props.onoff
  }
}
componentDidMount() {
  setInterval(function() {
    this.setState({
      onoff: !this.state.onoff
    }, 1000);
  }
}