使用括号和 && 的意外 jxs答案

【问题标题】：unexpected jxs using bracket and &&使用括号和 && 的意外 jxs
【发布时间】：2017-06-14 06:30:30
【问题描述】：

这个 jsx 有什么问题？

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

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

【问题讨论】：

去掉大括号{}
@OriDrori 在哪里？
外部{} 在那里无效（或者说它们的内容无效）。对象字面量不能包含任意表达式。 {... && ...} 根本不是有效的 JavaScript。您可能会想：“{...} 用于在 JSX 中嵌入表达式”，这是真的。但是外部的{} 不在 JSX 内部。
你应该先检查条件然后返回div，并且不要包含{}

标签： javascript reactjs jsx

【解决方案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>

【讨论】：