javascript 三元运算符 "chaining"
javascript ternary operator "chaining"
我正在尝试使用三元运算符编写类似这样的东西(由于 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
但这显然不是正确的方法。
非常欢迎任何帮助。提前致谢。
可视化它会有所帮助。
!this.state.msg ?
? this.state.ask.length != 0)
// do stuff
:
// do stuff
:
this.... ?
//do stuff
:
// ...
你的真实分支有两个组成部分;您可以用逗号分隔它们(带括号,因为逗号的结合性比三元运算符弱)。所以
!this.state.msg ?
(
this.state.ask.length != 0 ? /*stuff*/ : /*stuff*/,
this... ? /* stuff */ : /* ... */
) : /* nothing */
或者,由于 else
分支正在执行 "nothing",您可以将顶层的三元运算符替换为简单的 and:
!this.state.msg &&
(
this.state.ask.length != 0 ? /*stuff*/ : /*stuff*/,
this... ? /* stuff */ : /* ... */
)
你关于 JSX 以这种方式限制你的断言是错误的 - 阅读这篇文章 doc page 你会发现你可以使用这样的东西:
{(() => {
// My awesome multi-step code
})()}
为了冗长、表达清晰和可维护性,我不建议将 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)
:
也许添加另一个视角会有所帮助。您实际上 需要 将三元运算符与 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
}
}
然后您就可以在 render 方法中使用辅助函数了。
React.createClass({
helperFunction: function() {
// ...
},
render: function() {
return (
<div>
{this.helperFunction()}
</div>
);
}
});
您的辅助函数可以 return 可用于属性的值,也可以 return 其他 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 语句的大部分功能,但语法也更简洁,它让您优雅地 select 来自大量条件组件。使用 if 语句(常规或三元)编写的相同代码会更加冗长。
我正在尝试使用三元运算符编写类似这样的东西(由于 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
但这显然不是正确的方法。
非常欢迎任何帮助。提前致谢。
可视化它会有所帮助。
!this.state.msg ?
? this.state.ask.length != 0)
// do stuff
:
// do stuff
:
this.... ?
//do stuff
:
// ...
你的真实分支有两个组成部分;您可以用逗号分隔它们(带括号,因为逗号的结合性比三元运算符弱)。所以
!this.state.msg ?
(
this.state.ask.length != 0 ? /*stuff*/ : /*stuff*/,
this... ? /* stuff */ : /* ... */
) : /* nothing */
或者,由于 else
分支正在执行 "nothing",您可以将顶层的三元运算符替换为简单的 and:
!this.state.msg &&
(
this.state.ask.length != 0 ? /*stuff*/ : /*stuff*/,
this... ? /* stuff */ : /* ... */
)
你关于 JSX 以这种方式限制你的断言是错误的 - 阅读这篇文章 doc page 你会发现你可以使用这样的东西:
{(() => {
// My awesome multi-step code
})()}
为了冗长、表达清晰和可维护性,我不建议将 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)
:
也许添加另一个视角会有所帮助。您实际上 需要 将三元运算符与 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
}
}
然后您就可以在 render 方法中使用辅助函数了。
React.createClass({
helperFunction: function() {
// ...
},
render: function() {
return (
<div>
{this.helperFunction()}
</div>
);
}
});
您的辅助函数可以 return 可用于属性的值,也可以 return 其他 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 语句的大部分功能,但语法也更简洁,它让您优雅地 select 来自大量条件组件。使用 if 语句(常规或三元)编写的相同代码会更加冗长。