StencilJs / Jsx: визуализация HTMLElements во вложенном компоненте - PullRequest
Новая
       60

StencilJs / Jsx: визуализация HTMLElements во вложенном компоненте

0 голосов
/ 24 апреля 2020

Это мой компонент: 

@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, которые стали объектами.

Есть идеи, как мне этого добиться?

1 Ответ

1 голос
/ 25 апреля 2020

Это невозможно, потому что JSX работает по-другому. Вы можете передать htmlContent как строку и использовать innerHTML на my-alert-box, но это опасно (XSS).

Иони c ion-alert имеет то же ограничение с message проп ... см. https://ionicframework.com/docs/api/alert#properties, который имеет ссылку на https://ionicframework.com/docs/techniques/security, и там они объясняют, как они выполняют основную c очистку DOM (@ionic/core также построен с трафаретом).

...