Question

在阅读了很多React代码后，我注意到这种模式可以在React渲染方法中切换组件的渲染。

{ CONDITION && <Component /> }

这对我来说意义不大。这不是逻辑上的，而是完全是另一个运算符；在这种情况下，为什么&&呢？否则这是合乎逻辑的，并且，如果第一个子句为true，则惰性求值仅求值（提供）第二个子句。如果是这种情况，那就像我们不应该使用的丑陋骇客一样。

该语法是什么意思，其背后的原因是什么？

编辑：

从答案中可以明显看出，这是一个逻辑合取运算。之所以能够工作，是因为JS中的惰性评估是如何工作的。之所以使用它，是因为它比替代方法更实用。

这仍然让我非常不满意。明确定义为AND（{definition）的操作至少在我的世界中不应由于延迟加载（仅由于性能而存在）而更改定义。我想Javascript到处都有这些不一致之处。

Answer 1

A && B的计算结果为：

B（如果A为真，或
A否则。

如果您尝试在React中呈现值false或null或undefined，则不会呈现任何内容。

因此，如果{ CONDITION && <Component /> }虚假，CONDITION将不呈现任何内容，否则为<Component />。

我想到使用此语法的一个原因是{ ... }需要包含一个表达式，而if-else是一个语句。您可以在要渲染的JSX外部使用if-else并返回一个组件或另一个组件（这也是一种常见方法），但是如果需要在内部某个地方有条件地渲染某些东西，则不能这样做。 / p>

Answer 2

这是非常流行的语法，可以有条件地渲染某些东西。

{ CONDITION && <Component /> }

原因，

易于集成到JSX中
如果不需要，您不必写其他内容
不需要单独的变量来保存JSX元素。

简而言之 Avoide some boilerplate code 。

e.g. without short-circuit, it should like this.

let ComponentName = ''; //additional variable
if(CONDITION){ // Avoidable if else
   ComponentName =  <Component /> 
}

and then inside render
render(){
   <ComponentName />
}

添加更多样板代码。

Answer 3

简单的javascript比其他语言怪异

您可以找到更多类似&&的黑客/逻辑

我在javascript上发现的最好的

之一

https://github.com/denysdovhan/wtfjs

let myComment =  true && "This is why I love javascript";
let myPost =  false || "I love javascript";
   
console.log(myPost);
console.log(myComment);

在React渲染功能中隐藏/显示组件的逻辑和模式

3 个答案: