javascript - 以编程方式创建组件名称

Question

我正在制作一个简单的应用程序来显示指南/教程。

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

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

然后在我的函数的返回语句中：

{tutorialSteps[step]}

（需要注意的是，“step”是我的组件中的一个状态变量，是根据用户在指南中的进度更新的）

如前所述，每个教程都有不同的长度，我不想在我的字典中硬编码 99 个步骤（因为显而易见的原因，这是不好的做法）。

反正有没有根据当前步骤动态调用组件？

先感谢您。

标签： javascriptreactjs

Answer 1

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

const steps = [
  Step1,
  Step2,
  Step3,
];

render () {
  const [step, setStep] = useState(0);
  const Component = steps[step];
  return <Component onNext={() => setStep(step + 1)} />
}