Astro组件如何根据prop值渲染div

Question

我对 javascript 不太熟悉，正在学习 Astro。我不明白这个条件有什么问题？该网站已构建，但未找到匹配项，并且始终以“未知类型”结束。如果有更好的方法来做到这一点，请告诉我。下面是 astro 组件，我将 Astro 与 typescript 结合使用，在 MDX 文件中调用该组件。

// Component.astro

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

{
  () => {
    if (kind === "a") {
      <div>a</div>
    }
    if (kind === "b") {
      <div>b</div>    
    }
    if (kind === "c") {
      <div>c</div>
    } else {
      console.log("unknown kind.");
    }
  }
}

// the MDX file

<Component kind="a" />

我还觉得应该有一个更简单的速记来写这些陈述。但我什至无法让详细版本正常工作。感谢任何帮助。

Answer 1

工作示例

这是关于编译器如何工作的，这是您的示例重新设计的

// Component.astro

---
const { kind } = Astro.props;
//ensure kind is 'other' in fallback case
---

{(kind === "a") &&
      <div>a</div>
}
{(kind === "b") &&
      <div>b</div>    
}
{(kind === "c") &&
      <div>c</div>
}
{(kind === "other") &&
      console.log("unknown kind.");
}

参考

https://docs.astro.build/en/core-concepts/astro-syntax/#dynamic-html