Javascript 以编程方式创建组件名称

我正在react中制作一个简单的应用程序，其中显示了指南/教程

每个指南都有不同数量的步骤，每个步骤都是我在“教程”组件主体中渲染的组件。我想知道如何以编程方式在屏幕上调用每个元素。我现在的做法如下：

const tutorialSteps = {
    1: <Step1 />,
    2: <Step2 />,
    3: <Step3 />
  };

（需要注意的是，“步骤”是my组件中的状态变量，根据指南中的用户进度进行更新）

如上所述，每个教程都有不同的长度，我不想在字典中硬编码99个步骤（因为这显然是一种不好的做法）

是否仍然可以基于当前步骤动态调用组件

---

提前谢谢。

如果我在这里遗漏了一些基本的东西，我深表歉意，但为什么不这样做呢？（伪代码）

const steps=[
第1步，
步骤二
步骤三
];
渲染（）{
const[step，setStep]=useState（0）；
常数分量=步数[步数]；
返回设置步骤（步骤+1）}/>
}

组件是React中的一个组件，在某些情况下编译器必须知道，因此不能仅用字符串将其动态化。IOW:React中的字符串“Step1”不会自动绑定到

。但如果你的舞步中有一些共同点，你可以制作一个组件，然后从某种文件存储/数据库中获取数据。是的，我以前把东西存储在数据库中，但因为它们是大型HTML文件，很难维护，我的老板告诉我不允许lol。我希望有更好的方法，但我想我会继续搜索。非常感谢。欢迎来到堆栈溢出。您可以做您想做的事情，但是您仍然需要在代码中声明每个stepX组件——或者步骤的内容也是动态的吗？您可能需要在问题中提供更多的代码来说明步骤是如何构造的不，您完全正确！虽然这就是我目前正在做的，但问题是我不知道任何给定的教程可以有多少个步骤，所以我无法硬编码我要标记为正确的值，因为它几乎与我最终使用的解决方案相同，并且这在上下文中是可行的。我为每个单独的指南制作了一个新的主要组件，然后每个指南用硬编码列表控制自己的步骤。谢谢你的帮助！

{tutorialSteps[step]}