reactjs - 使用 React 和 TypeScript 动态渲染组件

Question

我有一组组件要呈现为多步骤表单。我正在尝试创建一个包含所有组件的数组，然后使用 map() 来包含这些组件。

const stepComponents = [
  <SelectCoach/>,
  <SelectDate/>,
];


<Steps>
  {stepComponents.map((component) => {
     return <component/>
  })}
</Steps>

但是我得到一个类型错误，

“JSX.IntrinsicElements”类型上不存在属性“component”。

知道如何解决这个问题吗？

谢谢

Answer 1

您可以简单地使用 ElementType 作为数据类型并使用组件的名称而不是使用标签:

import { ElementType } from 'react';

const stepComponents: ElementType[] = [
  SelectCoach,
  SelectDate,
];


<Steps>
  {stepComponents.map((component) => {
     return <component/>
  })}
</Steps>

这里有解释:Dynamic Tag Name Props in React (with TypeScript)