是否可以在 StencilJS 中延迟渲染组件？

Question

当您想构建复杂的组件时，如果您可以使用组件包装任何 DOM，例如带有条件的“延迟加载”组件（@Prop() 条件：布尔值），那就太好了，以说明我想要什么：

<lazy-load condition={some boolean condition, like certain link get clicked and section is now active}>
  <data-fetch>
  </data-fetch>
</lazy-load>

在本例中，"data-fetch" 将进行 HTTP 调用以获取一些大数据，我想将此组件添加到 DOM 中，直到我们在延迟加载组件中指定的条件是真的。

所以我开始实现延迟加载组件的render()，就像

@Prop() condition: boolean;

render() {
  if(!this.condition) {
    return null;
  }
  return (
    <slot/>
  );
}

并尝试将其用作

<lazy-load condition={false}>
  <data-fetch>
  </data-fetch>
</lazy-load>

但无论我尝试什么，数据获取组件都会添加到 DOM（虽然我们可以设置可见性以隐藏元素，但我们会浪费 HTTP 调用）我知道我可以在数据获取本身中放置相同的条件并且然后在条件为假时不进行 fetch 调用，但如果可能的话，我希望通用包装器组件来实现这一点（如果您熟悉 AngularJS 或 Angular，我想找到一种方法来等效于 ng-if 和 *ngIf off of通用包装组件）

也许这是由于“插槽”标签应该如何工作而造成的限制？（另外，我将它与 @Component({shadow: false}) 一起使用，所以我知道我是不使用 Web 组件规范中的标准 shadowDOM，所以也许我正在尝试做的事情不可行？

非常感谢您提前抽出时间阅读这个问题，我很感激能得到任何帮助。我觉得如果我们能做到这一点，我们也许能够构建可以快速加载不同的组件，直到我们认为它应该加载/渲染。

Answer 1

是的，不使用shadow: true 是个问题，因为在 polyfill 中，开槽的内容只是成为轻 DOM 的一部分（但被放置在槽元素所在的位置）。请注意，即使您启用了 Shadow DOM，如果浏览器不支持它，它仍然会回退到 polyfill。您可以在 Github 中提出有关此问题的问题，但我不确定是否/如何解决这个“动态插槽”问题。

但我认为你可以采取更简单的方法：

{myCondition && <data-fetch />}

这样data-fetch 元素只会在条件成立时添加。

您也可以将其重构为功能组件：

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

interface Props {
  if: boolean;
}

export const LazyLoad: FunctionalComponent<Props> = ({ if }, children) =>
  if && children;

import { LazyLoad } from './LazyLoad';

<LazyLoad if={condition}>
  <data-fetch />
</LazyLoad>