Javascript StencilJs/Jsx：在嵌套组件中呈现HTMLElements

这是我的组件：

@Component({
  tag: "my-alert-list",
  styleUrl: "alert-list.scss",
  shadow: true,
})
export class AlertList {
  @State() alertList: object[] = [];

  @Method()
  async appendAlert(
    type: string,
    message: string,
    htmlContent: object,
    canClose: boolean = false,
    closeDelay: number
  ) {
    let alertBoxElement = (
      <my-alert-box
        alert-type={type}
        message={message}
        can-close={canClose}
        close-delay={closeDelay}
        opened
      >
      {htmlContent}
      </my-alert-box>
    );
    this.alertList = [
      ...this.alertList,
      alertBoxElement
    ]
  }


  render() {
    return (
      <Host>
        {this.alertList}
      </Host>
    );
  }
}

我收到错误消息：

[STENCIL-DEV-MODE]作为子节点传递的vNode具有意外类型。 确保它使用了正确的h（）函数。 空对象也可能是原因，请查找成为对象的JSX注释

---

有没有关于如何实现这一点的想法？

不可能这样，因为JSX的工作方式不同。您可以将

htmlContent

作为字符串传递，并在

my alert box

上使用

innerHTML

，但这是危险的（XSS）

爱奥尼亚的

ion警报

与

消息

属性具有相同的限制。。。查看哪个有链接，并在那里解释如何进行一些基本的DOM清理（

@ionic/core

也使用模具构建）

$('#alertlist')[0].appendAlert(type='info',message='', htmlContent=document.createElement('div'))