时间戳

首页 > 解决方案 > import { h } from preact - 什么时候需要

preact - import { h } from preact - 什么时候需要

问题描述

我目前正在使用 CLI 构建 Preact PWA。

我的理解是，无论我有一个用 JSX 定义的组件，我都需要import { h } from 'preact'在文件的顶部有。

我删除了该导入语句的所有实例，但应用程序仍然运行并构建得非常好。

有人可以让我直截了当地说，因为我现在有点困惑 - 也许某个地方在幕后发生了一些魔法？

标签： preact

解决方案

当您编写类似的 jsx 语法时

render() {
  return <div id="abc">Hello World</div>
}

在屏幕后面它将转换为

render() {
  return h('div', { id: 'abc' }, 'Hello World')
}

那么，什么时候需要导入h呢？

答案是每次使用 jsx 语法。JSX 不是 JavaScript 规范的一部分，它必须转换为等效的函数调用。哪个在使用中使用h或在使用中反应React.createElement。

正如你提到的，我们可以import通过使用额外的babel-plugin-jsx-pragmatic插件来实现自动化。

module.exports = {
  presets: [],
  'plugins': [
    ['@babel/plugin-transform-react-jsx', { pragma: 'h' }],
    ['babel-plugin-jsx-pragmatic', {
      module: 'preact',
      import: 'h',
      export: 'h',
    }],
  ],
}

了解更多信息：https ://github.com/jmm/babel-plugin-jsx-pragmatic

推荐阅读