的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语句（常规或三元）编写的代码将更加冗长。