如何在react.js循环内写if语句

时间:2019-01-23 16:47:22

标签: reactjs

  <div className="pagination">
  <br />
    <center>
        {[...Array(this.props.pages+1)].map((x, i) =>
          <h2 key={i} onClick={()=>this.demoMethod(i+1)} className="tc">{ i+1 }</h2>
        )}
    </center>
  </div>

在我的代码中,我想写if else语句。 实际上,这是一个分页逻辑。 我想为活动页面更改h2的颜色。所以我想在里面写if语句。

请分享我的想法。

1 个答案:

答案 0 :(得分:1)

您还可以编写以下内容:

// active is a boolean variable having value true or false
<div className="pagination" style={{color: active? 'red' : 'blue'}}>

内部循环可以如下:

{[...Array(this.props.pages+1)].map((x, i) => {
   if(x) {
      return <h2 key={i} onClick={()=>this.demoMethod(i+1)} className="tc">{ i+1 }</h2>
     } else {
       return <p>my paragraph</p>
      }
   }
)}