Question

当您要构建复杂的组件时，如果可以用条件（@Prop（）条件：布尔值）包装带有“ lazy-load”组件之类的组件的DOM，那就太好了，以说明我想要的内容：< / p>

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

在此示例中，“数据获取”将进行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调用），我知道我可以在数据获取本身中添加相同的条件，然后在condition为false时不进行获取调用，但是如果可能的话，我希望通用包装器组件实现此目的（如果您熟悉AngularJS或Angular，我想找到一种方法来等效于ng-if和* ngIf通用包装器组件）

也许这是由于“插槽”标签应该如何工作引起的限制？（另外，我将它与@Component（{shadow：false}）一起使用，所以我知道没有使用Web组件规范中的标准shadowDOM，所以也许我想做的事不可行？

非常感谢您提前抽出宝贵的时间来阅读此问题，我感谢能获得的任何帮助。我认为，如果我们能做到这一点，我们也许可以构建可以快速改变加载方式的组件，直到我们认为应该加载/渲染时。

Answer 1

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

但是我认为您可以采用一种更简单的方法：

shadow: true

这样，{myCondition && <data-fetch />}元素仅在条件变为真时才添加。

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

data-fetch

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

interface Props {
  if: boolean;
}

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

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

1 个答案: