如何使用reactjs在周期性时间渲染数据

问题描述：

我想要切换数据说4分钟。我有2个值，我需要翻转。我已经实现翻转，但我需要它继续翻转它，直到我打电话再次加载值，谁能告诉我，我怎么能实现它？如何使用reactjs在周期性时间渲染数据

var Comment = React.createClass({ 


    render: function() { 
     var flippedCSS = "true" ? " Card-Back-Flip" : " Card-Front-Flip"; 
      return (

      <div className="Card" > 
       <div className= {"Card-Front"+flippedCSS} style={{backgroundColor: "Blue"}} > 
        <h3>{this.props.author}</h3> 
        </div> 
       <div className={"Card-Back"+flippedCSS} style={{backgroundColor: this.props.col}} > 
        <h3>{this.props.det}</h3> 
       </div> 

       </div> 



    ); 
    } 
}); 



    var CommentList = React.createClass({ 


    render: function() { 
     var commentNodes = this.props.data.map(
     function (comment) { 
     return (
     <Comment author={comment.IssueTxt} col = {comment.IssueValue} det ={comment.IssueTxtDet} > 

     </Comment> 
    ); 
     }); 
    return (
     <div style={{backgroundColor:"DarkBlue" }} > 
      {commentNodes} 
     </div> 
    ); 
    } 
});

使用setTimeout＆测量从现在到之前的时间 – johnjerrico

@johnjerrico你能帮我摘一下吗？ – Maddy

我相信@riyajkhan答案解决你的问题，请看看唯一的区别是，它是写在es6 – johnjerrico

答

根据您的要求，组件Comment不能是愚蠢的。您可以在componentDidMount中使用setInterval。

将flippedCSS设置为component state。

class Comment extends Component{ 

    constructor(){ 
     this.state = { 
      flippedCSS : true 
     } 
    } 

    render() { 
     var flippedCSS = this.state.flippedCSS; 

      return ( 
       <div className="Card"> 
        ....  
       </div> 
      ); 
     } 


    componentDidMount(){ 

     var interval = setInterval(()=>{ 

      this.setState({flippedCSS : !flippedCSS}) 

     }, 500); 

    } 

}

如何使用reactjs在周期性时间渲染数据

相关推荐