如何在Astro.js中用JavaScript实现组件动态展示对应分类数据？

要实现「单个组件根据传入参数渲染对应分类技能」的需求，你需要给SkillsIcon组件添加属性传参能力，并调整数据结构让分类与技能列表的对应关系更清晰，具体步骤如下：

1. 重构SkillsIcon.astro组件 #

修改组件的数据源结构，用统一字段存储技能列表，同时通过Astro的props接收父组件传入的分类名称，筛选出对应数据后渲染：

---
// 接收父组件传入的分类参数
const { category } = Astro.props;

// 统一数据结构，每个分类用category和items字段对应
const skills = [
    {
        category: 'Frontend',
        id: 1,
        items: ['HTML', 'CSS']
    }, 
    {
        category: 'Backend',
        id: 2,
        items: ['Firebase', 'PHP']
    }
];

// 根据传入的分类筛选对应技能列表，处理分类不存在的边界情况
const targetSkills = skills.find(skill => skill.category === category)?.items || [];
---

{targetSkills.map((skillName, index) => (
    <li key={index}>
        <h4 class="role me-2 astro-FP6HE37A">
            {skillName}
            <span class="invert position-absolute d-flex align-items-center justify-content-center h-100 w-100 astro-FP6HE37A">
                {skillName}
            </span>
        </h4>
    </li>
))}

2. 在父组件中传入分类参数 #

修改调用SkillsIcon的代码，给每个组件实例传入对应的category属性：

---
import SkillsIcon from '../components/SkillsIcon.astro';
---

<h3>Frontend</h3>
<SkillsIcon category="Frontend" />

<h3>Backend</h3>
<SkillsIcon category="Backend" />

关键说明 #

• 统一数据结构避免了动态取字段的不稳定写法，让代码更易维护；
• 用find+可选链+默认值处理分类不存在的情况，防止渲染报错；
• 遍历添加key属性符合Astro的渲染规范，提升渲染性能。

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