如何将HTMLDocument元素添加到StencilJS组件的JSX模板

Question

StencilJS v1.0.7中的新手问题在这里。 我试图将HTMLElement添加到JSX模板，该模板由StencilJS返回并呈现。 但是没有得到任何想要的结果。 我不确定这是一个错误还是缺少一个非常简单的步骤。

1. 我试过简单地添加元素但是得到
2. 然后尝试htmlList.outerHTML但得到>
3. 我知道存在，但是不知道在我的情况下应用它的正确方法。

// @stencil/core v1.0.7 🍵
import { Component, h } from '@stencil/core';
@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  render() {
    let htmlList=[
      <img src="https://example.com/test1.jpg" />,
      <img src="https://example.com/test2.jpg" />,
    ];
    // createElement
    window.console.log("Start createElement");
    let element = document.createElement('img');
    // Apply DOM Logic
    element.setAttribute('src', 'https://example.com/test3.jpg');
    // TODO Convert ??
    // Append to htmlList
    window.console.log(element);
    htmlList.push(element);
    // Try outerHTML
    window.console.log(element.outerHTML);
    htmlList.push(element.outerHTML);
    window.console.log("End createElement");
    // EOF createElement
    return <div>{htmlList}</div>;
  }
}

在Firefox或Chrome上，我只有此功能，不需要html。

记录抓取my-component.entry.js？s-hmr = 326127425623：19启动createElement my-component.entry.js？s-hmr = 326127425623：25 my-component.entry.js？s-hmr = 326127425623：28 my-component.entry.js？s-hmr = 326127425623：30结束createElement

HTML Grab

<div><img src="https://example.com/test1.jpg"><img src="https://example.com/test2.jpg"><undefined></undefined>&lt;img src="https://example.com/test3.jpg"&gt;</div>

块引用

如果在上面用

<div><div innerHTML={htmlList.join("")}></div></div> then 
[object Object][object Object][object HTMLImageElement]

Answer 1

哦，愚蠢的我！ 对于地球上像我这样的任何人，都会遇到这个问题。 这是答案:)

要在StencilJS中将HTMLElement添加到JSXElement中（至少），推荐的方法是“”文档中的内容。

因此要解决我的问题：

替换为

let htmlList=[
  '<img src="https://example.com/test1.jpg" />',
  '<img src="https://example.com/test2.jpg" />',
];
// And htmlList.push(element); with 
htmlList.push(element.outerHTML);
// And finally 
<div><div innerHTML={htmlList.join("")}></div></div>