在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

使用条件渲染,因为没有其他情况,您可以使用&&而不是三元运算符来简化:

它的工作原理是因为在JavaScript中,true && expression始终求值expression,并false && expression始终求值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.如果为false,则React不会呈现任何内容.记住,你必须在JSX中包装内联JavaScript表达式{ … },你不能只在JSX中使用它.

直接使用if/else语句是JSX将使它按字面呈现为文本,这是不希望的.您也不能在内联JavaScript表达式中使用它们,因为if 语句不是表达式,所以这不起作用:

{
  if(x) y
}

Answer 2

根据DOC：

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

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

JSX 中的表达式：

您可以通过将任何 JavaScript 表达式括在花括号中来在 JSX 中嵌入任何 JavaScript 表达式。

要放置我们需要使用的任何表达式{}，因此不要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>;

通过使用&& 运算符：

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