在React JSX中使用if语句

Question

Can you use a if statement in JSX like this?

    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>;

Something like above? Is it possible to have JSX based on a condition?

Answer 1

Use conditional rendering , and since you have no else-case, you can use && instead of a ternary operator for brevity:

It works because in JavaScript, true && expression always evaluates to expression , and false && expression always evaluates to false .

Therefore, if the condition is true, the element right after && will appear in the output. If it is false, React will ignore and skip it.

Thus:

   <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>

This will only render JSX if a condition is true. If it is false, React won't render anything. Remember, you have to wrap inline JavaScript expressions in JSX with { … } , you can't just have it inside JSX.

Using if/else statements directly is JSX will cause it to be rendered literally as text, which isn't desired. You also can't use them in inline JavaScript expressions because if statements are not expressions , so this won't work :

{
  if(x) y
}

Answer 2

As per DOC :

if-else statements don't work inside JSX. This is because JSX is just syntactic sugar for function calls and object construction.

---

We can't use if-else statement or any other statement directly inside JSX, only expressions are allowed.

Expressions inside JSX :

Wou can embed any JavaScript expression in JSX by wrapping it in curly braces.

To put any expression we need to use {} , so instead of if use && operator or ternary operator for conditional rendering.

By using ternary operator :

var chartGraphContent =
<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>
        :null
    }
</div>;

By using && operator :

var chartGraphContent =
<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>;

Answer 3

Better to use with ternary Operator , By doing so you can also add else block to your code.

Try this:

var chartGraphContent =
        <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>
                : "<span>Else Block</span>"
            }
        </div>;

Update (Another method)

and in case for more complex and large condition you can call inline functions too to return your template , in this way you can avoid your code to become messy. here is an example.

var ifBlockCode = function ifBlockCode(){
    return (
        <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>
    )
}

var elseBlockCode = function elseBlockCode(){
    return (
        <span>Else Block</span>
    )
}
var chartGraphContent =
<div className={"chartContent"}>
    {this.state.modalityGraph['nca'] > 0 ?
        {this.ifBlockCode} : {this.elseBlockCode}
    }
</div>;