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 的优势在于它知道结果后立即停止，和您可以将 && 用于您的输出，因为如果结果是 false，它将返回 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>
    )

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

2 个答案: