JSX 中的混合运算符

Question

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

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

虽然这在技术上可行，但 ES lint 警告 'no-mixed-operators'。这是在 JSX 中使用的安全模式吗？

Answer 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*/

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

希望对您有所帮助。

Answer 2

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

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

对我有用。

JSX 中的混合运算符

Mixed operators in JSX

jsx

reactjs

不允许混合使用不同的运算符(no-mixed-operators)