JSX 中的混合运算符答案

【问题标题】：Mixed operators in JSXJSX 中的混合运算符
【发布时间】：2017-06-13 11:13:18
【问题描述】：

我想在 JSX 中使用混合运算符，例如：

{datas && datas.map(function(data,i){ return <MyComponent key={i} />}) || []}

虽然这在技术上有效，但 ES lint 会警告“无混合运算符”。这是在 JSX 中使用的安全模式吗？

【问题讨论】：

只是关闭 lint 规则？ --> eslint.org/docs/rules/no-mixed-operators#when-not-to-use-it
我意识到我可以做到。但我想知道在 JSX 中使用混合使用运算符是否是一种不好的模式，应该避免。
当然可以使用混合运算符；它是有效的 JavaScript。 lint 投诉只是希望您正确地将它们括起来。

标签： reactjs jsx

【解决方案1】：

来自the ESLint documentation：

禁止混合使用不同的运算符（no-mixed-operators）

用括号括起来复杂的表达式阐明了开发人员的意图，这使代码更具可读性。当在表达式中连续使用不带括号的不同运算符时，此规则会发出警告。

var foo = a && b || c || d;    /*BAD: Unexpected mix of '&&' and '||'.*/
var foo = (a && b) || c || d;  /*GOOD*/
var foo = a && (b || c || d);  /*GOOD*/

如果您不想收到有关混合运算符的通知，那么禁用此规则是安全的。

希望这会有所帮助。

【讨论】：

对，我不认为这会应用 JSX，但如果我只是这样做：{(datas && datas.map(function(data,i){ return <MyComponent key={i} />})) || []} 它可以工作。谢谢。

【解决方案2】：

你可以像这样用括号括起来。它不会显示该警告。

{datas && (datas.map(function(data,i){ return <MyComponent key={i} />}) || [])}

它对我有用。

【讨论】：