Question

我正在尝试使用模具创建一个Web组件，并且在TSX文件中使用h1标签时出现以下错误：

[ ERROR ]  Missing "h" import for JSX types: ./src/components/side-drawer/side-drawer.tsx:1:19
           In order to load accurate JSX types for components, the "h" function must be imported from "@stencil/core"
           by each component using JSX. For example: import { Component, h } from '@stencil/core';

下面是我的Web组件的代码：

import { Component } from "@stencil/core";

@Component({
  tag: "vs-test",
})
export class Test {
  render() {
    return (
      <div>
        <h1>Hello</h1>
      </div>
    );
  }
}

Answer 1

好吧，终于从official docs那里得到了它。

自模板v1.0.0以来发生了重大变化

突破性变化

JSX的一个常见问题是每个单独的项目对全局JSX类型的使用。许多必需的更改是为了避免全局类型，这通常会导致从众多软件包中导入的应用程序出现问题。另一个变化是让每个组件导入其渲染器，例如JSX的h（）函数。

需要导入{h} 为了在Stencil应用中渲染JSX，必须从@ stencil / core导入h（）函数：

import { h } from '@stencil/core';

function app() {
  return <ion-app></ion-app>
}

h代表“超标”，这是JSX元素转换成的（它是在运行时中渲染时执行的实际函数）。模板的h导入等效于React的React.createElement。这也解释了为什么应用程序的tsconfig.json设置{“ jsxFactory”：“ h”}配置的原因，在TypeScript的JSX工厂功能文档中对此进行了详细介绍。

Answer 2

您是否尝试过将h依赖项添加到导入中？

从'@ stencil / core'导入{Component，h};

StencilJS：JSX类型缺少“ h”导入

2 个答案: