render - 将数据传递到 Stenciljs 中的插槽

Question

我正在创建某种通用组件，以便在 React 项目和一些老式的 Bootstrap + PHP 项目中使用它。
所以，我有这样的设计。

如您所见，它在左侧和右侧有重复的部分。我想尽可能多地动态渲染它，有点像 React 的渲染 Prop ，但它可以在纯 HTML + vanilla JS 中使用。
例如:在某些情况下可能没有图标，在其他情况下 - 可能有辅助文本行等。

之前我创建了一个带动态渲染的数据网格组件:

<campaign-table>
  <campaign-head>
    <campaign-cell numeric>ID</campaign-cell>
    <campaign-cell>Name</campaign-cell>
    <campaign-cell size="2">Description</campaign-cell>
  </campaign-head>
  <campaign-body>
    <template>
      {{#each items}}
      <campaign-cell numeric>ID: {{ id }}</campaign-cell>
      <campaign-cell> Name - <strong>{{ name }}</strong> </campaign-cell>
      <campaign-cell>ℹ️ {{ description }}</campaign-cell>
      {{/each}}
    </template>
  </campaign-body>
</campaign-table>

CampaingBody 组件有方法:

  componentWillLoad() {
    this.template = this.el.querySelector('template');
    this.renderTemplate = hbs.compile(this.template.innerHTML);
  }

hbs 是 Handlebars 包。但是当我使用这个技巧时，所有那些 VDOM 魔法似乎都被打破了。

所以，我很好奇有没有什么办法可以用“Stencil”方式实现这一点？如果每个插槽都知道必要的数据，它将能够正确地呈现它。

如何将数据传递到 Stenciljs 插槽中？

Answer 1

您可以使用数据和目标构建一个配置文件，然后运行一个循环

@Prop() config = [{
    name: 'test-slot-name',
    value: 'hello world'
}];
@Element() hostElement: HTMLStencilElement;

componentWillLoad() {
    this.config.forEach(entry => {
        let element = this.hostElement.querySelector('[slot="'+entry.name+'"]');
        element.value = entry.value;
    });
}