更新（另一种方法）

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。

因此，如果条件为真，那么元素就在＆amp;＆amp;将出现在输出中。如果是假，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中使用它。

直接使用if / else语句是JSX会使它按字面意思呈现为文本，这是不合适的。您也无法在内联JavaScript表达式中使用它们，因为如果语句不是表达式，那么不会工作：

{
  if(x) y
}

Answer 2

根据 DOC ：

if-else语句不适用于JSX。这是因为JSX才是函数调用和对象构造的语法糖。

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

Expressions inside JSX：

你可以通过将它包装成卷曲来在JSX中嵌入任何JavaScript表达式括号。

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

使用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一起使用，通过这样做，您还可以在代码中添加MixpanelAPI mixpanelAPI = MixpanelAPI.getInstance(context, MixPanelConstants.MIX_PANEL_TOKEN); mixpanelAPI.identify("user.alias");块。

试试这个：

angular.module('widget.core').service('urlShortener', service);

function service($log, $q, $http) {

    var gapiKey = '<MyApiKey>';
    var gapiUrl = 'https://www.googleapis.com/urlshortener/v1/url';

    return {
        shorten: shorten
    };

    //////////////////////////////////////////////////

    function shorten(url) {
        console.log(url);
        var data = {
            method: 'POST',
            url: gapiUrl + '?key=' + gapiKey,
            headers: {
                'Content-Type': 'application/json',
            },
            data: {
                longUrl: url,
            }
        };

        return $http(data).then(function (response) {
            $log.debug(response);
            return response.data;
        }, function (response) {
            $log.debug(response);
            return response.data;
        });
    };
};

更新（另一种方法）

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

{
    error: {
        code: 401,
        message: 'Invalid credentials'
    }
}

在React JSX中使用if语句

3 个答案:

更新（另一种方法）