使用 react 和 typescript 动态渲染组件答案

【问题标题】：Render components dynamically with react and typescript使用 react 和 typescript 动态渲染组件
【发布时间】：2022-07-04 18:17:55
【问题描述】：

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

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


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

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

Property 'component' does not exist on type 'JSX.IntrinsicElements'.

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

谢谢你

【问题讨论】：

标签： reactjs typescript tsx

【解决方案1】：

使用下面的代码应该可以工作。在您的代码中，您以 jsx 格式返回，但在您的数组中它已经是 jsx 格式，因此无需再次将其转换为 jsx 语法。

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

【讨论】：

【解决方案2】：

您已经实例化了 stepComponents 数组中的组件，通过 map 渲染它们时无需再次这样做：

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

或者更简单

<Steps>
  {stepComponents}
</Steps>

【讨论】：

【解决方案3】：

我认为问题出在你的数组中

const stepComponents = [
  SelectCoach,
  SelectDate,
];


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

【讨论】：

【解决方案4】：

您应该只返回组件，而不使用<>。

这里的工作示例：https://codesandbox.io/s/hopeful-varahamihira-35etf1?file=/src/App.tsx

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

但如果你不需要映射它们，那么我建议你根本不要使用 map 而只是使用：

<Steps>
  {stepComponents}
</Steps>

【讨论】：

【解决方案5】：

您可以简单地使用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)

【讨论】：