Reactjs 返回react组件的if/else语句

我是个新手，我读了JSX文件中if/else语句的文档，但不太明白如何处理它

我有一个组成部分：

var Favorite = React.createClass({
  getInitialState: function() {
    return {
      category: this.props.category
    }
  },

  handleClick: function() {
    console.log(this.that);
    var that = this;
    $.ajax({
      type: 'POST',
      url: Routes.favorite_category_path(this.props.category, { format: 'json' }),
      success: function(data) {
        that.setState({ category: data });
      }
    });
  },

  render: function() {
    var divClasses = classNames({
      "post-upvote": true,
      "post-upvote-upvoted": this.state.category.up_voted
    });


    return (
      <div className={divClasses} onClick={this.handleClick}>
        <div className="post-upvote-count">
          {this.state.category.up_votes}
        </div>
          <div>
            <div className="category-image">
              <a>
                <img src={this.props.category.category_picture} height="150" width="200"><h2><span>{this.props.category.name}</span></h2></img>
              </a>
            </div>
         </div>
      </div>

    );
  }
});

但是，由于不允许将if/else语句添加到此文件（favorite.js.jsx），我找不到放置if/else语句的位置

---

我应该怎么做？

您需要在JSX中使用三元

var assumption = <div>this is the assumption</div>

var elseCondition = <div>I guess I need to do this instead</div> 

{condition ? assumption : elseCondition}

---

您可以执行以下操作：

<div className={'category-image' + this.props.category.ancestry ? 'hidden' : ''}>

另外，为什么不使用已经实现这一点的classNames模块呢？否则，您也可以使用Chris提到的三元运算符。

您可以使用like

<div>   
   {!this.props.category.ancestry &&
     <div className='category-image'>
       //content
     </div>
   }
</div>

{！this.props.category.祖先&&
//内容
}

<div className={'category-image' + this.props.category.ancestry ? 'hidden' : ''}>

<div>   
   {!this.props.category.ancestry &&
     <div className='category-image'>
       //content
     </div>
   }
</div>