如何將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>