时间戳

首页 > 解决方案 > 仅在满足条件时才渲染组件，否则显示 0

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>
    )
  );

当过滤器的结果大于零时，组件被渲染，当结果为 0 时，它显示一个 0。当条件不为真时，我不想显示任何内容。

如何实现？

标签： javascriptreactjsecmascript-6filterjsx

解决方案

当条件不正确时，我什么都不显示。

0当条件为假时，您的代码当前返回。要不渲染任何内容，您必须返回nullor false：

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

正如 Patrick Roberts 指出的那样，您可以而且应该使用some而不是filter(...).length. 没有理由构建一个新数组，并且some具有在知道结果后立即停止的优势，并且您可以使用&&输出，因为如果结果是false，它将返回false并且不呈现任何内容：

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

推荐阅读