如何在 Astro 中创建“动态”数据属性（具有唯一 id 的 HTML 元素）并将变量从服务器传递到客户端

Question

在我的 Astro 应用程序中，我需要将变量从服务器（frontmatter）传递到客户端。

就像文档描述的那样，有两个选项。

• 使用数据属性
• 使用

  defineVars

据我现在看来，我不能同时使用它们？

我需要

---

type Props = {
  uuid: string;
};

const { uuid } = Astro.props;
---

<div class="my-feature" data-uuid={uuid} id="my-feature"></div>

<script is:inline src={import.meta.env.MY_SCRIPT}></script>

<script>
  import { MyFeatureHelper } from '@/scripts/my-helper';

  let myFeature;

  const ref = document.getElementById('my-feature');
  const uuid = ref?.dataset.uuid;
  console.log(uuid);

  myFeature = new MyFeatureHelper(ref as HTMLDivElement, {
    uuid: uuid,
  });

  myFeaturer.build();

</script>

上面工作正常，它将正确的变量

uuid

从服务器传递到客户端。

我需要一个动态数据属性

id

，例如：

---
const randomId = Math.random().toString(36).slice(2, 11);
---
<div class="my-feature" data-uuid={uuid} id="my-feature" data-id={randomId}></div>

我需要

ref

：

const ref = document.getElementById('my-feature');

将变量从服务器传递到客户端。那么我现在如何传递

data-id

属性及其值？

我不能在这里使用Astro DefineVars，因为在该脚本标签中我还导入了一个模块（

import { MyFeatureHelper } from '@/scripts/my-helper';

）。

这个问题有解决办法吗？

Answer 1

如果我理解正确，您正在寻找以下内容：

---
const randomId = Math.random().toString(36).slice(2, 11);
---

<div data-randomId={randomId} id="my-feature"></div>

<script>
  import { MyFeatureHelper } from '@/scripts/my-helper';

  const div = document.getElementById('my-feature');
  console.log(div?.dataset.randomId);
</script>

请注意，JS 变量

randomId

被序列化为 HTML 数据属性（因此您不能使用不适用于 JSON.stringify 的函数或类似对象）。

另一件事要注意的是，如果你在 astro 中使用不带

<script>

的

is:inline

，那么它将被 vite 捆绑，因此你不能拥有每个请求或每个页面更改的动态变量。这就是为什么我们将其序列化为 HTML 并从那里读出。

最后，

ref

是一种 React 术语。普通的 Astro 组件中没有这样的东西。在普通 JavaScript 中，对 DOM 节点的引用通常简称为

div

或

element

或

node

。