使用短路(&&)条件组件反应显示0而不是任何内容

Question

我有以下简单的短路语句,应该显示组件或什么都没有:

{profileTypesLoading && <GeneralLoader />}

如果该语句为false,则呈现0而不是任何内容.

我已经做了一个console.log(profileTypesLoading)公正的事情来快速查看该profileTypesLoading属性的状态,并且它是预期的1或0.0应为false ...导致无法渲染.对？

知道为什么会这样吗？

Answer 1

因为你的条件是falsy,因此不会返回第二个参数(<GeneralLoader />),它会返回profileTypesLoading,这是一个数字,所以反应会使其因为阵营跳过渲染什么,是typeof boolean或undefined,并会呈现什么是typeof string或number:

为了使其安全,您可以使用三元表达式{condition ? <Component /> : null}或布尔表达您的条件{!!condition && <Component />}

Answer 2

0是一个假值，所以当它被&&评估时，它返回 0。然而，0可以被 React 渲染，因为它是一个数字：

// Renderable values
1 && <GeneralLoader /> // => Renders <GeneralLoader />
"a string" && <GeneralLoader /> // => Renders <GeneralLoader />
0 && <GeneralLoader /> // => Renders '0'

// Non-renderable values
false && <GeneralLoader /> // => Renders nothing
null && <GeneralLoader /> // => Renders nothing
undefined && <GeneralLoader /> // => Renders nothing

TLDR

这是因为它本身的javascript如何处理[ truthy和falsy值] [1]：

在 JavaScript 中，真值是在布尔上下文中遇到时被认为是真的值。所有值都是真值，除非它们被定义为假（即，假、0、""、空、未定义和 NaN 除外）。

与&&运算符一起使用时，返回值取决于左值：

• 如果左边的值为真，则返回右边的值。
• 如果左值为假，则返回其值。

例子：

// Truthy values
1 && "hello" // => "hello"
"a string" && "hello" // => "hello"

// Falsy values
0 && "hello" // => 0
false && "hello" // => false
null && "hello" // => null
undefined && "hello" // => undefined

相同的规则适用于 JSX，因为它是 [JavaScript 的语法扩展][2]。然而，问题是**

问题是0是一个假值，所以当它被&&评估时，它返回 0。但是，0可以被 React 渲染，因为它是一个数字

// Renderable values
1 && <GeneralLoader /> // => Renders <GeneralLoader />
"a string" && <GeneralLoader /> // => Renders <GeneralLoader />
0 && <GeneralLoader /> // => Renders 0

// Non-renderable values
false && <GeneralLoader /> // => Renders nothing
null && <GeneralLoader /> // => Renders nothing
undefined && <GeneralLoader /> // => Renders nothing

Answer 3

您可以使用双 Bang (!!)。这将返回值的布尔 true/false 关联，并且不会呈现 0。

{!!profileTypesLoading && <GeneralLoader/>}

Answer 4

更直接的方法：

{Boolean(profileTypesLoading) && <GeneralLoader />}

Answer 5

这将解决问题：

{!!profileTypesLoading && <GeneralLoader />}

因为它会将 0 转换为 false。原因是当它的0下一个条件没有被执行时，它的行为就像 JavaScript 中的一个数字，所以双重否定在这里有帮助。