在React中有条件地渲染不同的数组

Question

我正在尝试有条件地映射可重用组件中的两个不同数组。我似乎无法让它发挥作用。显然，我可以将它们分成两部分，但我正在努力使组件可重用。有什么想法吗？

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

               <div type={type}>
                    {type.map((skill)=> <li key={skill.id}>{skill}</li>)}  
                </div>

在不同的组件中，我将两种不同的类型附加到可重用组件。

            <EducationCard type="fullStack">
                <h1>Web Development Bootcamp - 2023</h1>
            </EducationCard>
            <EducationCard type="reactSkills">The Ultimate React Course</EducationCard>

我尝试像这样有条件地渲染它：

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

这不起作用（而且也不是很好的代码），因此任何其他想法将不胜感激。

Answer 1

将两个数组放入一个对象中并通过适当的键引用它们

const arrays = {
  fullStack: [
    /*...*/
  ],
  reactSkils: [
    /*...*/
  ],
};

const EducationCard = ({ type }) => (
  <ul>
    {arrays[type]?.map((skill, i) => (
      <li key={i}>{skill}</li>
    ))}
  </ul>
);