在React JSX中使用if语句

morne 发表于 Dev

莫恩

您可以像这样在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将忽略并跳过它。

从而：

   <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语句不是表达式，因此这行不通：