如何使用reactjs在週期性時間渲染數據

Question

我想要切換數據說4分鐘。我有2個值，我需要翻轉。我已經實現翻轉，但我需要它繼續翻轉它，直到我打電話再次加載值，誰能告訴我，我怎麼能實現它？

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

Answer 1

根據您的要求，組件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); 

    } 

}