仅在满足条件时才渲染组件，否则显示 0

Question

我希望仅在条件为真时才显示组件，否则不显示任何内容。但在这种情况下，当条件不满足时，它会显示零 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。当条件不为真时，我不想显示任何内容。

如何实现？

Answer 1

当条件不成立时，我不想显示任何内容。

当条件为假时，您的代码当前返回0。要不渲染，你必须返回null 或false：

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

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

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

Answer 2

0 的值呈现为文本，但某些值根本不呈现，例如 null、undefined 或 false。因此，我在某些地方看到的一种模式是，如果您以这种方式将其与&& 一起使用，则使用!! 将类型强制为布尔值。所以在这里，它会是：

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