如何使用 FreshJs 控制 DOM 元素

Question

我正在尝试学习新的 Deno 框架 FreshJS。现在唯一困扰我的是 DOM 控件。如果我想动态更新菜单项或更改容器的颜色，我该怎么做？

本质上...我如何使用 FreshJS getElementByID()？我还没有找到有关如何执行此操作的任何文档。

我已经尝试过 vanillaJS 方法，但这些方法似乎不起作用（我从没想过它们会起作用）并且我已经查找了一些使用 preact 的 DOM 控制方法，但我真的没有找到任何看起来可以在 Fresh 中使用的东西.

Answer 1

与 ReactJS 有一些相似之处，也许它的核心是 ReactJS 我不知道我以前从未使用过它，但我在它的文档中寻找并找到了这个https://fresh.deno.dev/docs /getting-started/adding-interactivity 在他们使用 preact/hooks 的一些反应钩子的地方，我相信你应该使用 useRef 钩子。

Answer 2

简短的回答：你没有。

出于性能、DX 或可维护性的原因，这些 JS UI 框架（不仅仅是 React）的要点是摆脱直接的 DOM 操作。每个框架都有自己的方式来创建和管理状态，以及在状态发生变化时更新 UI。

要在 Fresh/Preact 中更改组件的颜色，您可以这样做：

// islands/MyComponent.tsx
import { useState } from 'preact/hooks';

export function MyComponent() {
    const [enabled, setEnabled] = useState(false);

    return (
        <div>
            <h1 style={{ color: enabled ? 'blue' : 'red' }}>Hello World!</h1>
            <button onClick={() => setEnabled(!enabled)}>Click me to toggle the colors</button>
        </div>
    );
}

我们创建一个状态值

enabled

并有办法用

setEnabled

更新它。当您单击该按钮时，它会使用 setter 切换此状态值，这将导致组件重新呈现。模板中的任何条件逻辑都将被重新评估，导致颜色发生变化。

Fresh 建立在 Preact 之上，所以我强烈建议您阅读 Preact 的教程，其中介绍了组件、渲染和 VDOM 等概念，因为您似乎不熟悉现代 UI 框架及其工作方式。

https://preactjs.com/tutorial/