由于条件为false，因此不会返回第二个参数（<GeneralLoader />），它将返回profileTypesLoading，这是一个数字，因此react将渲染它，因为React跳过对typeof、boolean或undefined的渲染，并将渲染typeof、string或number：
为了安全起见，您可以使用三元表达式{condition ? <Component /> : null}或布尔型转换条件，如{!!condition && <Component />}

• 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

• • 顶级域名注册商**

这是因为javascript本身处理[* truthy * and * falsy * values][1]的方式：
在JavaScript中，真值是在布尔上下文中遇到时被视为真的值。所有值都是真的，除非它们被定义为假（即，除了假、0、""、null、未定义和NaN）。
与 && 运算符一起使用时，返回值取决于左侧值：

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

示例：

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

这将解决以下问题：

{!!profileTypesLoading && <GeneralLoader />}

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

您可以使用双Bang（！！）。这将返回值的布尔真/假关联，并且不会呈现0。

{!!profileTypesLoading && <GeneralLoader/>}

更直接的方法是：

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

首先要计算一个false条件，使用const和terary是一个简单的方法。例如：
在这种情况下，如果someCollectionProperty为空，则显示一个简单按钮，否则，将显示一个带有some-options-menu的按钮（材质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

此代码

{ Boolean(profileTypesLoading) ? <GeneralLoader /> : <></> }

也解决了这个问题。因为我是一个初学者，我不知道这是否有缺点或副作用。