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

    } 

}