meez's questions

在我的 Astro 组件中，我使用class:list来实现顺风样式。

我遇到以下情况，两个条件都满足true，我想让isRedColor它领先。该如何解决这个问题？

<span
  class:list={[
    'text-large bg-gray text-white font-bold',
    { 'bg-orange': theme === "orange" },
    { 'bg-red': isRedColor },
    classes,
  ]}
>
  {title}
</span>

我有以下Astro组件：

   ---
    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-container');
    
      myFeature = new MyFeatureHelper(ref as HTMLDivElement, {
        uuid: this?.ref.uuid,
      });
    
      myFeaturer.build();
    
    </script>

我需要按照这里所述将uuidprop 传递给<script>不带任何内容的标签，因为这样我的脚本将被视为，并且我无法导入我需要的 JavaScript 类。define:varsis:inlineMyFeatureHelper

我如何才能访问uuid并使用它，例如uuid: this?.ref.uuid使用数据属性技巧？

我怎样才能让它工作？

我正在使用 Astro 和 TypeScript。

如何有条件地将 HTML 属性添加rel="noreferrer"到 Astro 中的元素？

那么当targetBlank = false它不在reldom 中渲染属性时呢？

或者是有条件地显示另一个 HTML 元素的唯一解决方案？

---
type Props = {
  to: string;
  targetBlank?: boolean;
};

const { to, targetBlank = false } = Astro.props;
---

<a
  href={to}
  target={targetBlank === true ? '_blank' : '_self'}
  rel={targetBlank === true ? 'noreferrer' : ''}
>
  <slot />
</a>