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

    }

}

如何使用reactjs定期渲染数据

1 个答案: