意外的jxs使用括号和＆amp;＆amp;

Question

这个jsx出了什么问题？

return(
    {(item.min_price > 0 || item.max_price > 0) && 
        <div className="col-md-12">
            {this.renderPrice()}
    </div>}
);

我在第2行得到了意外的令牌。

Answer 1

如果您删除curly brackets，它将有效。

const item = {
	min_price: 10,
  max_price: 10

}

class Test extends React.Component {
		render(){
    	return(
          (item.min_price > 0 || item.max_price > 0) && 
              <div className="col-md-12">
                    <div>Price</div>
              </div>
      );
    }
}

React.render(<Test />, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.8/react-dom.min.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>