在 React JSX 中使用 if 语句

Question

你能像这样在 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？

Answer 1

使用conditional rendering，因为你没有其他情况，为了简洁，你可以使用&&代替三元运算符：

之所以有效，是因为在 JavaScript 中，true && expression 的计算结果始终为 expression，而false && expression 的计算结果始终为 false。

因此，如果条件为真，则 && 之后的元素将出现在输出中。如果为 false，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>

这只会在条件为真时渲染 JSX。如果它是假的，React 不会渲染任何东西。请记住，您必须在 JSX 中使用 { … } 包装内联 JavaScript 表达式，而不能只在 JSX 中使用它。

在 JSX 中直接使用 if/else 语句会导致它按字面意思呈现为文本，这是不希望的。您也不能在内联 JavaScript 表达式中使用它们，因为如果 statements 不是 expressions，那么这 将不起作用：

{
  if(x) y
}

Answer 2

根据DOC：

if-else 语句在 JSX 中不起作用。这是因为 JSX 只是 函数调用和对象构造的语法糖。

---

我们不能在 JSX 中直接使用if-else 语句或任何其他语句，只允许使用表达式。

Expressions inside JSX:

你可以将任何 JavaScript 表达式嵌入到 JSX 中，方法是将其包裹在 curly 中 大括号。

要放置我们需要使用{} 的任何表达式，因此使用&& 运算符或ternary operator 代替if 进行条件渲染。

通过使用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>;

通过使用&& 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

更好地与ternary Operator 一起使用，通过这样做，您还可以将else 块添加到您的代码中。

试试这个：

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

更新（另一种方法）

如果遇到更复杂和更大的情况，你也可以调用内联函数来返回你的模板，这样你就可以避免你的代码变得混乱。这是一个例子。

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