javascript - 我们如何将客户在 JS 中创建的元素返回到 stenciljs 中的 web 组件的渲染中

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

render 方法必须返回 JSX 元素：

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