如何在Astro中通过data属性传递uuid至脚本并导入JS类

直接给你修正后的可运行代码，核心是利用DOM元素的data-*属性存储uuid，再在脚本中读取：

---
type Props = {
  uuid: string;
};

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

<!-- 把uuid存入data-uuid属性 -->
<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');
  // 从元素的dataset中读取uuid
  const uuid = ref?.dataset.uuid;

  if (ref && uuid) {
    myFeature = new MyFeatureHelper(ref as HTMLDivElement, {
      uuid: uuid
    });
    // 修正拼写错误：myFeaturer → myFeature
    myFeature.build();
  }
</script>

关键修改点说明： #

• 从data属性读取uuid：通过ref.dataset.uuid获取DOM元素上的data-uuid值，这是Astro官方推荐的非inline脚本传递变量的方式，不会破坏脚本的模块导入能力。
• 增加存在性检查：加了if (ref && uuid)避免DOM元素未找到或者uuid为空时出错。
• 修正拼写错误：原代码里的myFeaturer.build()是笔误，改成myFeature.build()。
• 保持脚本模块状态：因为没使用define:vars，这个脚本依然是模块脚本，所以可以正常导入MyFeatureHelper类，不会被强制转为inline脚本。

这样修改后，uuid就能正确传递到MyFeatureHelper的实例化参数中，代码可以正常运行。

内容的提问来源于stack exchange，提问作者meez