javascript - 如何在没有构建工具的情况下将 useState hook 与 Preact 一起使用？-6ren

javascript - 如何在没有构建工具的情况下将 useState hook 与 Preact 一起使用？

转载作者：行者123 更新时间：2023-12-05 02:37:49

25

4

目前，我需要让 Preact 应用程序在没有任何构建工具的情况下运行，只需使用带有导入语句的 index.html 即可从 CDN 获取 Preact。我能够从 CDN 导入 useState Hook 没问题，甚至能够 console.log() 函数 useState 的值，但每当我尝试使用它，我收到一条错误消息:

'Uncaught TypeError: u is undefined'

你会碰巧知道为什么会这样吗？我曾尝试在功能组件内部和外部使用 useState 函数，但无论哪种方式都不起作用。我在这里错过了什么吗？谁能帮我指出正确的方向？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script type="module">
        import { h, Component, render } from 'https://unpkg.com/preact?module';
        import { useState } from 'https://unpkg.com/preact@latest/hooks/dist/hooks.module.js?module'
        import htm from 'https://unpkg.com/htm?module';

        // Initialize htm with Preact
        const html = htm.bind(h);
      
        const App = (props) => {

            const [testVar, setTestVar] = useState(0);

            var countVariable = 0;

            const incrementButtonHandler = () => {
                countVariable = countVariable + 1;
            }

            const logMethod = () => {
                console.log(countVariable);
                countVariable = countVariable + 1;
            }

          return html`<div>
            <h1>Test ${props.name}!: ${countVariable}</h1>
            <button onClick=${logMethod}>Increment</button>
          </div>`;
        }
      
        render(html`<${App} name="World" />`, document.body);
      </script>
</head>
<body>
    
</body>
</html>

最佳答案

这是 unpkg 可以做什么的已知错误和限制，请参阅:https://github.com/preactjs/preact/issues/2571

不过有几个简单的修复方法:

为每个模块使用已解析的 URL(注意预导入中的 @latest)

import { h, render } from 'https://unpkg.com/preact@latest?module'
import { useState } from 'https://unpkg.com/preact@latest/hooks/dist/hooks.module.js?module'
import { html } from 'https://unpkg.com/htm/preact/index.module.js?module'

使用 CDN 没有这个问题，比如 skypack ，而是:

import { h, render } from 'https://cdn.skypack.dev/preact';
import { useState } from 'https://cdn.skypack.dev/preact/hooks';
import { html } from 'https://cdn.skypack.dev/htm/preact';

两者都可以。

关于javascript - 如何在没有构建工具的情况下将 useState hook 与 Preact 一起使用？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/69891883/

25

4

0

文章推荐： r - 如何在组内将第一个值与每个后续值进行比较，直到满足条件

文章推荐： .net - 更新到 VS 2022 后无法构建

c++ - 当钩子(Hook)启动一个新线程时取消 Hook 一个钩子(Hook)进程
我创建了一个简单的钩子(Hook)，我安装了它 SetWindowsHookEx(WH_CBT, addr, dll, 0); 完成后，我卸载 UnhookWindowsHookEx(0); 然后我可
reactjs - React Hooks Mobx : invalid hook call. Hooks 只能在函数组件的主体内部调用
我正在使用 React Hooks，当我用 mobx 的观察者包装我的组件时，我收到了这个错误。可能是什么问题？是否可以将 mobx 与 React Hooks 一起使用？ import classn
javascript - Redux - Hooks : Using React Hooks with Redux Hooks, 创建无限循环或根本不创建任何内容
我知道这个问题已经被回答过很多次了。我只是找不到解决我的问题的答案，让我相信，我要么是愚蠢的，要么是我的问题没有被解决，因为它比我更愚蠢。除此之外，这是我的问题: 我正在尝试创建一个功能组件，它从 r
react-hooks - React Native 的 useNavigation Hook 在自定义 Hook 内？
我正在使用 React Navigation 的 useNavigation 钩子(Hook): 在 MyComponent.js 中: import { useNavigation } from "
hook - Gitlab 预提交钩子(Hook)
我想在 gitlab 中使用预提交钩子(Hook)。我做的一切都像文档中一样:https://docs.gitlab.com/ce/administration/custom_hooks.html 在
hook - 编程中术语 "hook"是什么意思？
我最近在和一些人谈论我正在编写的程序时听到了“hook”这个词。尽管我从对话中推断出钩子(Hook)是一种函数，但我不确定这个术语到底意味着什么。我搜索了定义，但找不到好的答案。有人可以让我了解这个术
hook - TYPO3:创建或编辑页面后 Hook
我正在寻找一个在页面创建或页面更改后调用的钩子(Hook)，例如“在导航中隐藏页面”、“停用页面”或“移动/删除页面“ 有人知道吗？谢谢! 最佳答案这些 Hook 位于 t3lib/class.t
hook - 在 Hook 环境中添加自定义方法？
我正在使用钩子(Hook)将新方法添加到 CalEventLocalServiceImpl 中... 我的代码是.. public class MyCalendarLocalServiceImpl e
hook - Compass 中的后期编译钩子(Hook)
编译器将所有 SCSS 文件编译为 STANDALONE(无 Rails)项目中的 CSS 后，我需要一个 Compass Hook 。除了编辑“compiler.rb”(这不是好的解决方案，因为
Python 请求 : Hook or no Hook?
我“.get”一个请求并像这样处理响应: resp = requests.get('url') resp = resp.text .. # do stuff with resp 阅读包的文档后，我看到
git Hook : is there a clone hook?
我们想在外部数据库中存储一些关于提交的元信息。在克隆或 checkout 期间，应引用此数据库，我们将元信息复制到克隆的存储库中的文件中。需要数据库而不是仅仅使用文件是为了索引和搜索等...... 我
javascript - react Hook : what is best practice for wrapping multiple instances of a hook with a single hook?
我有一个 react 钩子(Hook)useDbReadTable，用于从接受tablename和query初始数据的数据库读取数据。它返回一个对象，除了数据库中的数据之外，还包含 isLoading
javascript - 使用 React hooks 如何一起更新 2 个钩子(Hook)，但在另一个钩子(Hook)中使用其中一个的 prevState
在下面的代码中，当我调用 _toggleSearch 时，我同时更新 2 个钩子(Hook)。 toggleSearchIsVisible 是一个简单的 bool 值，但是，setActiveFilt
reactjs - 有没有办法使用带有 useFieldArray 钩子(Hook)的 react 钩子(Hook)形式在子组件中设置默认值 - 不使用 useForm 钩子(Hook)？
问题我想在可由用户添加的表单中实现输入字段的键/值对。参见 animated gif on dynamic fields . 此外，我想在用户提交表单并再次显示页面时显示保存的数据。参见 ani
javascript - react Hook : How to read & update state in hooks without infinite loops with react-hooks/exhaustive-deps rule
当状态处于 Hook 状态时，它可能会变得陈旧并泄漏内存: function App() { const [greeting, setGreeting] = useState("hello");
reactjs - React Hooks，如何实现useHideOnScroll hook？
const shouldHide = useHideOnScroll(); return shouldHide ? null : something useHideOnScroll 行为应该返回更新后
javascript - 如何在另一个自定义 Hook 中使用返回值的自定义 Hook ？
我正在使用 React-native，在其中，我有一个名为 useUser 的自定义 Hook，它使用 Auth.getUserInfro 方法从 AWS Amplify 获取用户信息，并且然后获取返
hook - Gitolite 更新 Hook 排除存储库
我正在添加一个 gitolite 更新 Hook 作为 VREF，并且想知道是否有办法将它应用于除 gitolite-admin 之外的所有存储库。有一个更简单的方法而不是列出我想要应用 Hook
react-hooks - 渲染的钩子(Hook)比上一次渲染时更多
如何使用带有 react-apollo-hooks 的 2 个 graphql 查询，其中第二个查询取决于从第一个查询中检索到的参数？我尝试使用如下所示的 2 个查询: const [o, setO
javascript - React hooks - 不能在普通异步函数中使用 hook？
我是 hooks 的新手，到目前为止印象还不错，但是，如果我尝试在函数内部使用 hooks，它似乎会提示(无效的 hook 调用。Hooks can only be called inside o

首页

博学

6Ren·AI

商城

javascript - 如何在没有构建工具的情况下将 useState hook 与 Preact 一起使用？