如何在模板中正确解析子组件。

Question

我正在尝试使用Scencen.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>

父组件需要通过解析每个“自定义标签”组件（没有渲染方法）来渲染基础HTML并提取'Label '来自每个选项卡的参数，构建这些标签的导航列表，并类似地提取每个选项卡的主要内容并显示在选项卡的相应面板中。

在我的父组件中，我在“ 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没有解析自定义评分< /code>组件，然后将其作为文本输出。您能否提出正确显示标签内容的正确方法，以使所有内容都正确解析？

Answer 1

您可以通过设置 innerhtml：

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>
);