reactjs - React 显示 0，而不是使用短路 (&&) 条件组件显示任何内容

Question

我有以下简单的短路语句，它应该显示一个组件或不显示任何内容:

{profileTypesLoading && <GeneralLoader />}

如果该语句为 false，则会呈现 0而不是什么都没有。

我做了一个console.log(profileTypesLoading)只是为了快速查看 profileTypesLoading 的状态属性是，并且按预期为 1 或 0。 0 应该是 false...不会导致任何渲染。对吗？

知道为什么会发生这种情况吗？

Answer 1

由于您的条件为假，因此不会返回第二个参数( <GeneralLoader /> )，因此它将返回 profileTypesLoading ，这是一个数字，所以 React 会渲染它，因为 React 会跳过 typeof boolean or undefined 的任何内容的渲染。并将渲染 typeof string or number 的任何内容:

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