javascript - StencilJs/Jsx : render HTMLElements in nested component

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 block 。(my-alert-box 有一个接收器插槽元素，我验证了它是否有效)。我尝试使用 htmlContent 变量来实现此目的，如您所见，但如果我这样做，它当然不起作用:

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

我收到错误:

[STENCIL-DEV-MODE] vNode passed as children has unexpected type. Make sure it's using the correct h() function. Empty objects can also be the cause, look for JSX comments that became objects.

知道如何实现这一目标吗？

Answer 1

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

Ionic 的 ion-alert 与 message 属性具有相同的限制...请参阅 https://ionicframework.com/docs/api/alert#properties其中有一个链接到 https://ionicframework.com/docs/techniques/security ，在那里他们解释了如何进行一些基本的 DOM 清理(@ionic/core 也是使用 Stencil 构建的)。