我想在反应中写出等价物:
if (this.props.conditionA) {
<span>Condition A</span>
} else if (this.props.conditionB) {
<span>Condition B</span>
} else {
<span>Neither</span>
}
也许吧
render() {
return (<div>
{(function(){
if (this.props.conditionA) {
return <span>Condition A</span>
} else if (this.props.conditionB) {
return <span>Condition B</span>
} else {
return <span>Neither</span>
}
}).call(this)}
</div>)
}
但这似乎过于复杂。有没有更好的办法?
为什么你说三元不足够表达?
render() {
return <span>
{this.props.conditionA ? "Condition A"
: this.props.conditionB ? "Condition B"
: "Neither"}
</span>;
}
如果你不需要<div>
,只需返回<span>
元素:
render() {
if (this.props.conditionA) {
return <span>Condition A</span>;
} else if (this.props.conditionB) {
return <span>Condition B</span>;
} else {
return <span>Neither</span>;
}
}
您甚至可以将最后一个return
语句移出else
块。
通常,您不必将所有内容嵌入JSX中。事先计算值非常好,就像你在其他地方一样:
render() {
let content;
if (this.props.conditionA) {
content = <span>Condition A</span>;
} else if (this.props.conditionB) {
content = <span>Condition B</span>;
} else {
content = <span>Neither</span>;
}
return <div>{content}</div>;
}
每当需要/想要使用语句时,您必须这样做。
计算值,绑定到变量,然后输出更好。如果你想要内联的复杂逻辑,你可以使用&&
和||
:
render() {
return (<div>
{
this.props.conditionA && <span>Condition A</span>
|| this.props.conditionB && <span>Condition B</span>
|| <span>Neither</span>
}
</div>)
}
编辑:
正如其他人指出的那样,你也可以删除那个包装div并仍然使用这种方法:
render() {
return (
this.props.conditionA && <span>Condition A</span>
|| this.props.conditionB && <span>Condition B</span>
|| <span>Neither</span>
);
}
实际上,这不是方法。
var element;
if (this.props.conditionA) {
element = (<span>Condition A</span>)
} else if (this.props.conditionB) {
element = (<span>Condition B</span>)
} else {
element = (<span>Neither</span>)
}
...
{element}
如果你的情况和你表达的一样简单,我认为你仍然可以使用上面提到的@SkinnyJ作为三元组。这很优雅,但如果有很多这些条件要检查,我会引起你的关注。还有另外一种方法可以解决这个问题:使用switch语句。
const props = {
conditionA: "this is condition a"
};
let value;
switch (Object.keys(props)[0]) {
case "conditionA":
value = "Condition A";
break;
case "conditionB":
value = "Condition B";
break;
default:
value = "Neither";
}
console.log(value);
这里有几个假设。该对象不为null并且它只有一个属性。
但如果这些都是真的,那么对于这样的场景,切换可能会更高效。这可能对您有意义:
如果仍有人遇到此问题,请在eslintrc.js
文件中粘贴以下行。
"no-nested-ternary" : "off"
这将允许您在jsx代码中开始使用嵌套的三元组。