Как мы можем вернуть созданный клиентом элемент в JS для рендеринга веб-компонента в stenciljs

Question

У меня есть компонент, который имеет настраиваемый метод для создания элемента, я создаю настраиваемый элемент с помощью js и возвращаю массив, как мы можем использовать этот массив или элементы / элемент для возврата в качестве элемента рендеринга

Примечание: createCustomElement будет иметь динамическую реализацию

      import { Component, Element, Prop, State } from '@stencil/core'


@Component({
  tag: 'common-listing',
  shadow: true,
})
export class CommonListing {
  @Element() el: HTMLElement

  @Prop() columns: any

  @State() list: Array<any> = []

  @State() click: string = 'CLic'

  async componentWillLoad() {
    const res = await fetch('http://localhost:3000/users')
    const data = await res.json()
    this.list = data
  }
  createCustomElement(l: any) {
    let div = document.createElement('div')
    let span = document.createElement('span')
    span.innerText = l['user_id']
    div.appendChild(span)
  }
  render() {
    let content = this.list.map(l => this.createCustomElement(l))
    return content
  }
}

Answer 1

Метод рендеринга должен возвращать элементы JSX:

      render() {
  return this.list.map(l => <div><span>{l['user_id']}</span></div>);
}