如何正确解析Stencil.js组件中的子组件

Question

我正在尝试使用stenccil .js创建具有以下结构的选项卡组件:

<custom-tabs>
<custom-tab active label="Label 1">
Some generic HTML content <custom-rating value="4"></custom-rating>
</custom-tab>
<custom-tab active label="Label 2">
Some more generic HTML content <custom-rating value="5"></custom-rating>
</custom-tab>
</custom-tabs>

父组件需要通过解析每个'custom-tab'组件(它没有render方法)并从每个选项卡中提取'label'参数来呈现底层HTML，构建这些标签的导航列表，并类似地提取每个选项卡的主要内容并显示在选项卡的相应面板中。

在父组件中，我抓取了'componentWillLoad'钩子中的标签

componentWillLoad() {
// Grab tabs from this component
this.tabs = Array.from(this.el.querySelectorAll('custom-tab'));
console.log(this.tabs);
}

，然后在渲染函数我尝试输出内容:

return (
<div>
{this.tabs.map((tab: HTMLCustomTabElement, index: number) => {
return (
<div
role="tab"
onClick={() => this.openTab(index)}>
{tab.label} {tab.innerHTML}
</div>
);
})}
</div>
);

问题是tab.innerHTML不解析custom-rating组件，只是将其作为文本输出。你能建议正确的方式来显示选项卡的内容，以便一切都正确解析?

Answer 1

您可以通过设置innerHTML属性输出HTML:

return (
<div>
{this.tabs.map((tab: HTMLCustomTabElement, index: number) => {
return (
<div
role="tab"
onClick={() => this.openTab(index)}>
{tab.label}
<div innerHTML={tab.innerHTML}></div>
</div>
);
})}
</div>
);