Javascript 仅当满足条件时渲染组件，否则将显示0

我希望组件仅在条件为真时显示，否则不显示任何内容。但在这种情况下，当不满足条件时，它显示为零

0

代码如下：

  const documents = [
    { types: [{}], value: 'good' },
    { types: [], value: 'bad' },
    { types: [{}, {}, {}], value: 'good' },
    { types: [{}], value: 'bad' }
  ];
  const toCheck = 'good';
  return (
    documents.filter((a) => a.types.length && a.value === toCheck).length && (
      <div>render this component</div>
    )
  );

const文档=[
{types:[{}]，值：'good'}，
{types:[]，值：'bad'}，
{types:[{}，{}，{}]，value:'good'}，
{types:[{}]，值：'bad'}
];
const toCheck=‘好’；
返回(
documents.filter（（a）=>a.types.length&&a.value==toCheck）。length&&(
渲染此组件
)
);

当“过滤器”的结果大于零时，将渲染组件，当结果为0时，将显示0。当条件不正确时，我不想显示任何内容

如何实现这一目标

当条件不正确时，我不想显示任何内容

当条件为false时，您的代码当前返回

0

。要不呈现任何内容，必须返回

null

或

false

：

return (
    documents.filter((a) => a.types.length && a.value === toCheck).length
        ? <div>render this component</div>
        : null
);

当条件不正确时，我不想显示任何内容

当条件为false时，您的代码当前返回

0

。要不呈现任何内容，必须返回

null

或

false

：

return (
    documents.filter((a) => a.types.length && a.value === toCheck).length
        ? <div>render this component</div>
        : null
);

---

0

的值被呈现为文本，但一些值根本不会呈现，如

null

、

未定义的

或

false

。所以我在一些地方看到的一种模式是使用

强制将类型转换为boolean如果您以这种方式将其与
&&
一起使用。因此，这里应该是：

return (
    !!documents.filter((a) => a.types.length && a.value === toCheck).length && (
      <div>render this component</div>
    )

返回(
！！documents.filter（（a）=>a.types.length&&a.value==toCheck）。length&&(
渲染此组件
)
值
0
被呈现为文本，但有些值根本不呈现，如
null
、
未定义的
、或
假
。因此，我在某些地方看到的一种模式是，如果您以这种方式将类型与
&
一起使用，则使用
！！
将类型强制为布尔值。因此，这里是：

return (
    !!documents.filter((a) => a.types.length && a.value === toCheck).length && (
      <div>render this component</div>
    )

返回(
！！documents.filter（（a）=>a.types.length&&a.value==toCheck）。length&&(
渲染此组件
)
或将
.filter（…）.length&&…
更改为
。一些（…）&&&（…
？布尔值不会在React中呈现任何内容。@PatrickRoberts-我知道你可以用
{something}来实现这一点
，但我不知道它作为渲染函数的返回值工作。谢谢！！Re：渲染函数的返回值；直接返回布尔值将导致TypeScript中的类型错误，因为它返回或
null
。但它在运行时起作用。因此，为了满足类型安全性而不影响行为，您可以只包装expr使用
{…}
进行会话。或者将
.filter（…）.length&&…
更改为
。一些（…）&&&…
？布尔值不会在React中呈现任何内容。@PatrickRoberts-我知道你可以使用
{something}来实现这一点
，但我不知道它作为渲染函数的返回值工作。谢谢！！Re：渲染函数的返回值；直接返回布尔值将导致TypeScript中的类型错误，因为它返回或
null
。但它在运行时起作用。因此，为了满足类型安全性而不影响行为，您可以只包装expr使用
{…}
.FWIW进行会话，虽然可以执行
{undefined}
，但不能从呈现函数返回
未定义的
——React认为它根本不返回任何内容并抱怨（）。因此要不呈现，需要返回
null
或
false
.FWIW，尽管可以执行
{undefined}
，您不能从呈现函数返回
未定义的
——React认为它根本没有返回任何内容并抱怨（）。因此，要不呈现，您需要返回
null
或
false
。