如何使用 React (JSX) 编写 else if 结构 - 三元的表达力不够
Posted
技术标签:
【中文标题】如何使用 React (JSX) 编写 else if 结构 - 三元的表达力不够【英文标题】:How can I write an else if structure using React (JSX) - the ternary is not expressive enough 【发布时间】:2016-12-13 03:28:27 【问题描述】:我想在 react 中写一个等价的:
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>)
但这似乎过于复杂。有没有更好的办法?
【问题讨论】:
你真的想要一个围绕 span 的包装 div 吗? @FelixKling 这意味着代表更复杂的东西,但没有 div 不是完全必要的 【参考方案1】:如果还有人遇到此问题,请在您的eslintrc.js
文件中粘贴以下行。
"no-nested-ternary" : "off"
这将允许您开始在 jsx 代码中使用嵌套三元。
【讨论】:
【参考方案2】:如果你的情况和你表达的一样简单,我认为你仍然可以像上面提到的@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);
这里有几个假设。该对象不为空并且它只有一个属性。
但如果这些都是真的,那么对于这样的场景,switch 可能会更高效。您可能对此感兴趣:
javascript switch vs if else
【讨论】:
【参考方案3】:为什么说三进制表达力不够?
render()
return <span>
this.props.conditionA ? "Condition A"
: this.props.conditionB ? "Condition B"
: "Neither"
</span>;
【讨论】:
是的,很好,这实际上很整洁。我使用了三元表达式(在 jsx 中),但开始觉得它很麻烦,也许我需要一个更好的例子才能解释原因。 这是一种不好的做法,嵌套三元运算符很快就会变得不可读:eslint.org/docs/rules/no-nested-ternary @SherloxFR 这值得商榷github.com/eslint/eslint/issues/3480#issuecomment-189960121 @YosefWeiner 我认为实际上最好用三元(或只是 &&)制作两个 块,即使有些人无法找到解决方法,这是可能的,而且从更易读的角度来看,代码的可读性是没有争议的,即使我理解有些人很难找到这个 eslint 规则的解决方案。 感谢@Yosef Weiner,为我节省了数小时的头痛:D 漂亮的三元代码;)【参考方案4】:计算值,绑定到变量,然后再输出更好。如果你确实想要复杂的内联逻辑,你可以使用&&
和||
:
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>
);
【讨论】:
我喜欢这个 - 对于某些组件,最好将它们全部放在“你面前”,而不是引用其他变量和/或组件。我听到你在说什么,但要小心认知开销。【参考方案5】:如果您不需要<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>;
当您需要/想要使用语句时,您必须这样做。
【讨论】:
我喜欢let content
方法,&&
和三元表达式只是有点难以阅读【参考方案6】:
确实,这不是办法。
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
【讨论】:
以上是关于如何使用 React (JSX) 编写 else if 结构 - 三元的表达力不够的主要内容,如果未能解决你的问题,请参考以下文章
在 className if-else 语法中反应 JSX [重复]