Question

我是React的新手，我在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>

    );
  }
});

我想渲染相同的html加上＆＃34;隐藏＆＃34;使用＆＃34; category-image＆＃34;如果这个条件得到验证：

this.props.category.ancestry != 'null'

但是，我无法找到if / else语句的位置，因为不允许在此文件中添加它（favorite.js.jsx）。

我该怎么做？

Answer 1

您需要在JSX中使用三元组合。

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

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

{condition ? assumption : elseCondition}

不是简单地使用由我所展示的有效JSX代码组成的变量，而是可以渲染整个组件（这实际上是相同的）。

所以，你的if条件只是检查值是 this.props.category.ancestry 非null（真实）所以你的三元组只需看起来像这样，

{this.props.category.ancestry ? assumption : elseCondition}

Answer 2

您可以做的是：

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

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

Answer 3

你可以使用like;

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

if / else语句返回反应组件

3 个答案: