使用奇数/偶数切换为classNames

时间:2017-02-28 01:54:36

标签: javascript css reactjs

我希望每个this.state.title根据不同的类名对齐。

我尝试使用css flex box / nth-of-type / nth-child,但它与React的效果不佳。

我使用this.state来获取对象。

我的尝试失败

render: function () {
    let className
    var newVar = !someVar;

 switch(someVar) {
        case odd:
            className= "post-1 line";
            break;
        case even:
            className = "post-2 right-align line";
            break;
    }
    return (
          <article class={I WANT THIS TO FILL FROM SWITCH}>           
              <div class="s-12 l-6 post-image">                   
                 <a href="post-1.html">
                 <img src="/post1.jpg">
                 </a>                
              </div>          
              <div class="s-12 l-5 post-text">
                 <a href="#">
                    <h2>{this.state.title}</h2>
                 </a>
                 <p>Testing           
                 </p>
              </div>

              <div class="s-12 l-1 post-date">
                 <p class="date">28</p>
                 <p class="month">feb</p>
              </div>
           </article>

    );
  }
});

3 个答案:

答案 0 :(得分:0)

将重写类属性作为className反应,有关详细信息,请参阅react

    render: function () {
        let className = ['post-2 right-align line', 'post-1 line'][someVar % 2];
        return (
            <article className={className}>
                <div className="s-12 l-6 post-image">
                    <a href="post-1.html">
                        <img src="/post1.jpg"/>
                    </a>
                </div>
                <div className="s-12 l-5 post-text">
                    <a href="#">
                        <h2>{this.state.title}</h2>
                    </a>
                    <p>Testing
                    </p>
                </div>

                <div className="s-12 l-1 post-date">
                    <p className="date">28</p>
                    <p className="month">feb</p>
                </div>
            </article>
        );
    }

答案 1 :(得分:0)

&#39; someVar&#39;是局部变量?您可以尝试在状态下编写,通过this.setState根据您的需要进行变更。

答案 2 :(得分:0)

这是整个例子:

cxn = sqlite3.connect('db.sqlite')
cur = cxn.cursor()
rows = cur.execute('SELECT * FROM data').fetchall()
cxn.close()
DATA = {'values': rows}
SHEETS.spreadsheets().values().update(spreadsheetId=SHEET_ID,
    range='A1', body=DATA, valueInputOption='USER_ENTERED').execute()