我们如何将客户在 JS 中创建的元素返回到 stenciljs 中的 webcomponent 渲染

问题描述

我有一个组件，它有一个创建元素的自定义方法，我使用 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
  }
}

解决方法

render 方法必须返回 JSX 元素：

@page