Astro JS if 语句

Question

我如何在 astro JS 组件中添加条件。例如，如果只有“DOG”，我如何显示一个项目？

---
const items = ["Dog", "Cat", "Platypus"];
---
<ul>
  {items.map((item) => (
    <li>{item}</li>
  ))}
</ul>

Answer 1

您可以在数组上使用 JS 的过滤方法，以仅使用适用于您的条件的项目。

---
const items = ["Dog", "Cat", "Platypus"];
---
<ul>
  {items.filter(item => item === "Dog").map(item => (
    <li>{item}</li>
  ))}
</ul>

另一种方法是使用嵌套条件渲染，这并不理想，也不太吸引眼球。

---
const items = ["Dog", "Cat", "Platypus"];
---
<ul>
  {items.map(item => (
    {item === "Dog" && <li>{item}</li>}
  ))}
</ul>