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

【问题标题】：How to add HTMLDocument Element to a JSX Template for a StencilJS Component如何将 HTMLDocument 元素添加到 StencilJS 组件的 JSX 模板
【发布时间】：2019-08-16 19:52:42
【问题描述】：

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

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

// @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 抓取

<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]

【问题讨论】：

标签： javascript typescript jsx stenciljs

【解决方案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>

【讨论】：