StencilJS函数式组件无法返回null，如何返回空VNode？

StencilJS 的 FunctionalComponent 要求返回值必须是 VNode | VNode[]，直接返回 null 会触发 TypeScript 类型错误。要实现组件不渲染、不生成实例且符合类型要求，可采用以下两种方案：

方案一：返回空JSX Fragment #

直接返回 <></>，这是合法的 VNode 类型，渲染时不会生成任何 DOM 节点，也不会创建组件实例，完全满足需求。

代码示例：

import { FunctionalComponent } from '@stencil/core';

const MyComponent: FunctionalComponent = ({ shouldRender }) => {
  if (!shouldRender) {
    return <></>;
  }
  return <div>需要渲染的内容</div>;
};

方案二：返回空文本节点（兼容旧版Stencil） #

如果项目使用的旧版 Stencil 对空 Fragment 支持不佳，可以返回包含空字符串的文本节点，同样不会渲染可见内容。不过此方案会生成一个空的 <span> 节点，若严格要求不生成任何 DOM 元素，优先选择方案一。

代码示例：

import { FunctionalComponent } from '@stencil/core';

const MyComponent: FunctionalComponent = ({ shouldRender }) => {
  if (!shouldRender) {
    return <span>{''}</span>;
  }
  return <div>需要渲染的内容</div>;
};

内容的提问来源于stack exchange，提问作者Safa Alai