React可复用组件中如何条件渲染不同数组？

首先分析你原条件渲染失效的核心问题：

• 传入的type是字符串（"fullStack"/"reactSkills"），但你判断时用了type === fullstack——这里fullstack是未定义的变量，且大小写与传入的字符串不匹配，应该直接比较字符串值。
• 数组元素是纯字符串，不存在skill.id属性，key直接用skill本身即可（所有技能名称唯一，符合key的要求）。

方案1：修正条件判断（快速生效） #

把判断逻辑改成字符串比较，同时修正key：

{type === "fullStack" 
  ? fullStack.map((skill) => <li key={skill}>{skill}</li>) 
  : reactSkills.map((skill) => <li key={skill}>{skill}</li>)}

方案2：用映射对象（更优雅，扩展性强） #

这种方式适合后续新增技能类型的场景，无需修改渲染逻辑，只需要扩展映射表：

1. 先创建技能映射对象：

const skillMap = {
  fullStack: ["HTML", "CSS", "Javascript", "NodeJs", "React", "MongoDB", "Bootstrap"],
  reactSkills: ["React Query", "Redux", "Context API","Tailwind", "Custom Hooks","Supabase"]
};

2. 组件内直接根据type取值渲染：

<div>
  {/* 可选链?.防止传入不存在的type时触发错误 */}
  {skillMap[type]?.map((skill) => <li key={skill}>{skill}</li>)}
</div>

另外注意：原生div标签没有type属性，你可以把组件上的type作为props接收，不需要给div设置这个属性。

内容的提问来源于stack exchange，提问作者Leslie W.