在 React JSX 中使用 if 语句

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

Use 条件渲染，并且由于您没有其他情况，因此您可以使用&&为了简洁起见，而不是三元运算符：

它之所以有效，是因为在 JavaScript 中，true && expression总是评估为expression, and false && expression总是评估为false.

因此，如果条件是true，紧随其后的元素&&将出现在输出中。如果是false，React 会忽略并跳过它。

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>

仅当条件为真时才会渲染 JSX。如果为 false，React 将不会渲染任何内容。请记住，您必须将内联 JavaScript 表达式包装在 JSX 中：{ … }，你不能只将它放在 JSX 中。

直接在 JSX 中使用 if/else 语句将导致它按字面意思呈现为文本，这是我们不希望看到的。您也不能在内联 JavaScript 表达式中使用它们，因为 if声明不是表达式， 所以这行不通:

{
  if(x) y
}