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

我收到错误：

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

关于如何实现此目标的任何想法？

Answer 1

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

爱奥尼克（Ionic）的ion-alert与message道具具有相同的限制...请参阅https://ionicframework.com/docs/api/alert#properties，其中有指向https://ionicframework.com/docs/techniques/security的链接，在那里他们解释了他们如何做一些基本的事情。 DOM清理（@ionic/core也使用Stencil构建）。

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

1 个答案: