您可以像这样在JSX中使用if语句吗?
var chartGraphContent = <div className={"chartContent"}> if(this.state.modalityGraph['nca'] > 0){ <div className={"chart-container"}> <Chart chartType="ColumnChart" data = { this.state.modalityGraph?this.state.modalityGraph.chartData['units']:emptyDataRows } options={chartOptions} graph_id="modalitiesChart" width="100%" height="250px" /> </div> } </div>;
像上面的东西?是否可以根据条件使用JSX?
使用条件渲染,并且由于没有其他情况,因此&&为了简洁起见,可以使用而不是三元运算符:
&&
之所以起作用,是因为在JavaScript中,true && expression总会求和expression,并且false && expression总会求和false。 因此,如果条件为true,则&&之后的元素将出现在输出中。如果为假,React将忽略并跳过它。
之所以起作用,是因为在JavaScript中,true && expression总会求和expression,并且false && expression总会求和false。
true && expression
expression
false && expression
false
因此,如果条件为true,则&&之后的元素将出现在输出中。如果为假,React将忽略并跳过它。
从而:
<div className={"chartContent"}> {this.state.modalityGraph['nca'] > 0 && <div className={"chart-container"}> <Chart chartType="ColumnChart" data = { this.state.modalityGraph?this.state.modalityGraph.chartData['units']:emptyDataRows } options={chartOptions} graph_id="modalitiesChart" width="100%" height="250px" /> </div> } </div>
仅当条件为true时才渲染JSX。如果为假,React将不会渲染任何内容。请记住,您必须使用来将内联JavaScript表达式包装在JSX中{ … },而不仅仅是将其包含在JSX中。
{ … }
直接使用if / else语句是JSX会导致它实际上以文本形式呈现为文本,这是不希望的。您也不能在内联JavaScript表达式中使用它们,因为if 语句 不是 表达式 ,因此这 行不通 :
{ if(x) y }