的JavaScript三元運算符「鏈接」

Question

我想寫這樣的一個三元操作符（必要的，因爲JSX語法約束）

if(!this.state.msg) { 
    if(this.state.ask.length != 0) { 
     // do stuff 
    } else { 
     // do stuff 
    } 
    if(this....) { 
     //do stuff 
    } else { 
     // ... 
    } 
} else { 
    //nothing 
} 

所以，我想這個愚蠢

!this.state.msg ? this.state.ask.length != 0 ? //do stuff : "" this.state... ? //do stuff : //do other stuff : //nothing 

但這顯然不是正確的選擇。

任何幫助非常歡迎。提前致謝。

Answer 1

你的真正的分支有兩個組件;你可以用逗號分開它們（加上括號，因爲逗號比三元運算符的關聯性弱）。所以

!this.state.msg ? 
    (
    this.state.ask.length != 0 ? /*stuff*/ : /*stuff*/, 
    this... ? /* stuff */ : /* ... */ 
) : /* nothing */ 

或者，因爲else分支做「什麼」，你可以在一個簡單的頂級更換三元運算符和：

!this.state.msg && 
    (
    this.state.ask.length != 0 ? /*stuff*/ : /*stuff*/, 
    this... ? /* stuff */ : /* ... */ 
) 

Answer 2

可視化幫助。

!this.state.msg ? 
         ? this.state.ask.length != 0) 
           // do stuff 
         : 
           // do stuff 
        : 
        this.... ? 
           //do stuff 
           : 
           // ... 

Answer 3

你錯了，你的說法，JSX限制你用這種方式 - 閱讀本doc page，你會看到，你可以使用這樣的：表達和可維護性

{(() => { 
// My awesome multi-step code 
})()} 

Answer 4

對於冗長，清晰，我不會推薦將if-else轉換爲三元表達式。儘量保持代碼簡單，即使犧牲一些額外的行。

這是，如果你只是想學習

!this.state.msg ? 
    (this.state.ask.length != 0 ? //do if stuff : //do else stuff), 
    (this.some == 0 ? //do 2nd if stuff : //do 2nd else stuff) 
: 

Answer 5

也許這會幫助增加另一個視角。實際上，需要才能在JSX中使用三元運算符，這是非常罕見的。在這種情況下，我會考慮將所有這些邏輯移出到一個單獨的函數中。

helperFunction: function() { 
    if(!this.state.msg) { 
    if(this.state.ask.length != 0) { 
     // return stuff 
    } else { 
     // return stuff 
    } 

    if(this....) { 
     // return stuff 
    } else { 
     // ... 
    } 
    } else { 
    // nothing 
    } 
} 

然後你就可以在你的渲染方法中使用你的幫助函數。

React.createClass({ 
    helperFunction: function() { 
    // ... 
    }, 
    render: function() { 
    return (
     <div> 
     {this.helperFunction()} 
     </div> 
    ); 
    } 
}); 

您的幫助函數可以返回可用於屬性的值，也可以返回其他JSX組件。我經常發現它有助於移動代碼出的圖案看起來像這樣：

render: function() { 
    return (
    condition === 'example' ? 
     <MyComponent attr={this.props.example} onChange={this.props.onChange} /> : 
     <MyOtherComponent attr={this.state.example} onChange={this.state.onChange}/> 
    ); 
} 

代碼看起來像這樣：

helper: function(condition) { 
    if(condition === 'example') { 
    return (
     <MyComponent attr={this.props.example} onChange={this.props.onChange} /> 
    ); 
    } 

    else { 
    return (
     <MyOtherComponent attr={this.state.example} onChange={this.state.onChange}/> 
    ); 
    } 
}, 
render: function() { 
    return this.helper(condition); 
} 

甚至更​​好字符串平等檢查的情況。

helper: function(condition) { 
    const default = <MyOtherComponent attr={this.state.example} onChange={this.state.onChange}/> 

    const conditions = { 
    example: <MyComponent attr={this.props.example} onChange={this.props.onChange} />, 
    example2: <MyComponent attr={this.props.example} onChange={this.props.onChange} />, 
    example3: <MyComponent attr={this.props.example} onChange={this.props.onChange} />, 
    }; 

    return conditions[condition] || default; 
}, 
render: function() { 
    return this.helper(condition); 
} 

這樣，給你最switch語句的力量，但更簡潔的語法也一樣，它可以讓你優雅地從大量有條件的組件選擇。使用if語句（常規或三元）編寫的代碼將更加冗長。