React 显示 0 而不是带有短路 (&&) 条件组件的空

Question

我有以下简单的短路语句，它要么显示一个组件，要么什么都不显示：

{profileTypesLoading && <GeneralLoader />}

如果语句为假，它会呈现 0 而不是什么都没有。

我做了一个 console.log(profileTypesLoading) 只是为了快速查看 profileTypesLoading 属性的状态是什么，它是预期的 1 或 0。 0 应该是 false...导致不呈现任何内容。对吗？

知道为什么会这样吗？

Answer 1

这将解决问题：

{!!profileTypesLoading && <GeneralLoader />}

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

Answer 2

由于你的条件是假的，所以 return 第二个参数 (<GeneralLoader />) 也不是，它将 return profileTypesLoading，这是一个数字，所以React 将渲染它，因为 React 会跳过任何 typeof boolean or undefined and will render anything that is typeof string or number:

的渲染

为了安全起见，您可以使用三元表达式 {condition ? <Component /> : null} 或布尔值转换您的条件，例如 {!!condition && <Component />}

Answer 3

0 是一个假值，所以当它被 && 求值时，它 returns 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]:

In JavaScript, a truthy value is a value that is considered true when encountered in a Boolean context. All values are truthy unless they are defined as falsy (i.e., except for false, 0, "", null, undefined, and 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 是一个假值，所以当它被 && 计算时，它 returns 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 4

要首先评估假条件，使用带有三元的 const 是一种简单的方法。示例：

在这种情况下，如果 someCollecctionProperty 为空，将显示一个简单的按钮，否则将显示一个带有一些选项菜单的按钮（Material UI 示例）

export default function MyComponent({ obj }) {

  const jsxResponse = !obj.someCollecctionProperty.length ? <Button>No Action</Button> 
    : 
    <>
      <Button 
        aria-label="more"
        aria-controls="long-menu"
        aria-haspopup="true" 
        variant="contained" 
        onClick={handleClick} 
        color={'primary'}>
          <ThumbUpAltOutlinedIcon/>OK
      </Button>
      <Menu
        id="long-menu"
        anchorEl={anchorEl}
        keepMounted
        open={open}
        onClose={handleClose}
      >
        {obj.someCollecctionProperty.map((option) => (
          <MenuItem key={option.id} onClick={handleClose}>
            <Avatar variant="square" alt={option.name} src={option.url}/>{option.configName}
          </MenuItem>
        ))}
      </Menu>
    </>;

  return (<div>{jsxResponse}</div>);
}

jsxResponse 是渲染组件，0 on view 可以用这个来避免

Answer 5

更直接的方法：

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

Answer 6

您可以使用双 Bang (!!)。 returns 值的布尔值 true/false 关联，不会呈现 0。

{!!profileTypesLoading && <GeneralLoader/>}

React 显示 0 而不是带有短路 (&&) 条件组件的空

React showing 0 instead of nothing with short-circuit (&&) conditional component

components

short-circuiting

reactjs