时间戳

首页 > 解决方案 > StencilJs/Jsx：在嵌套组件中渲染 HTMLElements

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

该方法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 注释。

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

标签： javascriptreactjsjsxstenciljs

解决方案

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

Ionic与propion-alert有相同的限制......请参阅https://ionicframework.com/docs/api/alert#properties ，其中包含指向https://ionicframework.com/docs/techniques/security的链接，他们在那里解释他们如何进行一些基本的 DOM 清理（也是用 Stencil 构建的）。message@ionic/core

推荐阅读