Javascript 如何使用 React (JSX) 编写 else if 结构 - 三元不够表达
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/38810843/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How can I write an else if structure using React (JSX) - the ternary is not expressive enough
提问by Henry
I want to write the equivalent in react:
我想在反应中写出等价物：
if (this.props.conditionA) {
<span>Condition A</span>
} else if (this.props.conditionB) {
<span>Condition B</span>
} else {
<span>Neither</span>
}
So maybe
所以也许
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>)
}
But that seems overly complex. Is there a better way?
但这似乎过于复杂。有没有更好的办法？
回答by Yosef Weiner
Why do you say that the ternary is not expressive enough?
为什么说三元不够表达？
render() {
return <span>
{this.props.conditionA ? "Condition A"
: this.props.conditionB ? "Condition B"
: "Neither"}
</span>;
}
回答by Felix Kling
If you don't need the <div>, just return the <span>elements:
如果您不需要<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>;
}
}
You can even move the last returnstatement out of the elseblock.
您甚至可以将最后一个return语句移出else块。
In general, you don't have to embed everything inside JSX. It's perfectly fine to compute values beforehand, just like you do elsewhere:
通常，您不必将所有内容都嵌入 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>;
}
You have to do that whenever you need / want to use a statement.
每当您需要/想要使用语句时，您都必须这样做。
回答by Jacob
Calculating the value, binding to a variable, then outputting later is better. If you dowant complex logic inline, you could use &&and ||:
计算值，绑定到一个变量，然后输出更好。如果你确实想要复杂的内联逻辑，你可以使用&&and ||：
render() {
return (<div>
{
this.props.conditionA && <span>Condition A</span>
|| this.props.conditionB && <span>Condition B</span>
|| <span>Neither</span>
}
</div>)
}
Edit:
编辑：
As others pointed out, you can also remove that wrapping div and still use this approach:
正如其他人指出的那样，您还可以删除该包装 div 并仍然使用这种方法：
render() {
return (
this.props.conditionA && <span>Condition A</span>
|| this.props.conditionB && <span>Condition B</span>
|| <span>Neither</span>
);
}
回答by KumarM
If your condition is as simple as what you expressed, I think you can still use ternary as @SkinnyJ mentioned above. It's quite elegant, but I get your concern if there are lot of these conditions to check. There's one other way to solve this problem: using switch statement.
如果你的条件和你表达的一样简单，我想你仍然可以像上面提到的@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);
There are a couple of assumptions being made here. That the object is not null and that it has only one property.
这里有几个假设。该对象不为空并且它只有一个属性。
But if those are true, for scenarios like this, switch might be more performant. This might be of interest for you:
但如果这些都是真的，对于这样的场景，switch 可能会更高效。这可能对您感兴趣：
回答by Nouman khan
If any one still facing this issue, please paste below line in your eslintrc.jsfile.
如果任何人仍然面临此问题，请将以下行粘贴到您的eslintrc.js文件中。
"no-nested-ternary" : "off"
This will allow you to start using nested ternary in your jsx code.
这将允许您开始在 jsx 代码中使用嵌套的三元。
回答by Hunter
Indeed, that is not the way.
确实，这不是办法。
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}
