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はダム・ワンにすることはできません。

setIntervalはcomponentDidMountで使用できます。

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

    } 

}