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

Question

这是我的组成部分：

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

appendAlert方法的目的是在警报列表中添加一个新的my-alert-box元素。在同样的情况下，我不想将一个简单的文本传递给my-alert-box，而是一些HTML块。(my-alert-box有一个接收器插槽元素，我验证了它的工作能力)。正如您可以看到的那样，我试图用htmlContent变量来实现这一点，但是如果我这样做，它当然不能工作：

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

我收到错误：

作为子级传递的

模具-DEV-模式vNode具有意外类型。确保它使用的是正确的h()函数。空对象也可能是原因，查找成为对象的JSX注释。

你知道我怎么能做到这一点吗？

Answer 1

不可能出现这种情况，因为JSX的工作方式不同。您可以将htmlContent作为字符串传递，并在my-alert-box上使用innerHTML，但这很危险(XSS)。

离子的ion-alert与message的支柱具有相同的限制。请参阅https://ionicframework.com/docs/api/alert#properties，它有指向https://ionicframework.com/docs/techniques/security的链接，在这里他们解释了如何进行一些基本的DOM清理(@ionic/core也是用模板构建的)。