使用条件渲染，并且由于您没有 else-case，&&为了简洁起见，您可以使用代替三元运算符：

它有效，因为在 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 将不会渲染任何东西。请记住，您必须使用 将内联 JavaScript 表达式包装在 JSX 中{ … }，您不能将它放在 JSX 中。

直接使用 if/else 语句是 JSX 会导致它被逐字呈现为文本，这是不希望的。你也不能在内联 JavaScript 表达式中使用它们，因为 if语句不是表达式，所以这不起作用：

{
  if(x) y
}

根据DOC：

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

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

JSX 中的表达式：

你可以通过用花括号将任何 JavaScript 表达式嵌入到 JSX 中。

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

最好与三元运算符一起使用，通过这样做，您还可以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>;