Preact组件无法渲染子组件问题求助

问题出在htm模板中自定义组件的引用方式上：你直接写<Successful />时，htm会将其识别为普通HTML标签（而非Preact组件），所以不会渲染你定义的Successful组件内容。

在htm/preact中，引用自定义组件必须使用${}语法，把组件变量插入到模板里。修正后的代码如下：

<div id="app"></div>

<script type="importmap">
  {
    "imports": {
      "preact": "https://esm.sh/preact@10.23.1",
      "htm/preact": "https://esm.sh/htm@3.1.1/preact?external=preact"
    }
  }
</script>

<script type="module">
  import { render } from 'preact'
  import { html } from 'htm/preact'

  function Successful() {
    return html`
        <div>SUCCESSFUL</div>
    `
  }

  function App() {
    return html`
        <div>TEST</div>
        <!-- 用${Successful}引用自定义组件 -->
        <${Successful} />
    `
  }
  render(html`<${App} />`, document.getElementById('app'));
</script>

核心修改点：将App组件中的<Successful />改为<${Successful} />，这样htm才会正确识别这是一个Preact组件并渲染它。

内容的提问来源于stack exchange，提问作者Amadan