可以像这样在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的基础上的条件?
3条答案
按热度按时间u5rb5r591#
使用conditional rendering,由于没有其他情况,为了简洁起见,可以使用
&&
代替三元运算符:它之所以有效,是因为在JavaScript中,
true && expression
的计算结果总是expression
,而false && expression
的计算结果总是false
。因此,如果条件为
true
,则&&
后面的元素将出现在输出中。如果条件为false
,则React将忽略并跳过它。因此:
如果条件为真,React将只呈现JSX。如果条件为假,React将不呈现任何内容。记住,您必须使用
{ … }
Package JSX中的内联JavaScript表达式,您不能只在JSX中使用它。在JSX中直接使用if/else语句会导致它被直接渲染为文本,这是不希望的。您也不能在内联JavaScript表达式中使用它们,因为if * statements * 不是expressions,所以这 * 将不起作用 *:
py49o6xq2#
根据**DOC**:
if-else语句在JSX中不起作用,这是因为JSX只是函数调用和对象构造的语法糖。
我们不能直接在JSX中使用
if-else
语句或任何其他语句,只允许使用表达式。JSX内部的表达式:
Wou可以通过将任何JavaScript表达式用大括号括起来来将其嵌入到JSX中。
要放置任何表达式,我们需要使用
{}
,因此使用&&
操作符或ternary operator
代替if
进行条件渲染。通过使用三元运算符:
通过使用&&运算符:
j2qf4p5b3#
最好与ternary Operator一起使用,这样做还可以将
else
块添加到代码中。试试这个:
更新(另一种方法)
如果你遇到更复杂和更大的条件,你也可以调用内联函数来返回你的模板,这样你就可以避免你的代码变得混乱。