如何为React组件中包含字符串与JSX元素的数组Prop定义正确的TypeScript类型？

嘿，我来帮你搞定这个TypeScript类型的问题！你的场景其实很常见——当组件的Prop数组里混合了字符串和JSX元素时，我们需要一个能同时兼容这两种类型的TypeScript定义，而不是用宽泛的any。

首先，React官方已经为这类可渲染的内容提供了一个完美的类型：React.ReactNode。这个类型专门用来表示所有可以被React渲染的内容，包括：

• 字符串、数字
• JSX元素（比如你的<Link>组件）
• React Fragment
• null、undefined
• 甚至是数组形式的上述内容

所以你只需要把Content组件的Props接口里的mainContent类型改成React.ReactNode[]就可以了，同时还要修正map里的一个小错误：index的类型应该是number而不是string。

下面是修正后的content.tsx代码：

// my-directory/content.tsx
import React from 'react';

interface Props {
  mainContent: React.ReactNode[]; // 这里改成正确的类型
}

export default function Content({ mainContent }: Props) {
  return (
    <div>
      {mainContent.map((content: React.ReactNode, index: number) =>
        <div key={index}>{content}</div>
      )}
    </div>
  );
}

这样修改后，TypeScript就能正确识别数组里的每一项是可渲染的内容，既不会报错，也保留了类型检查的优势，比用any安全多了。

另外，你也可以不用在map的参数里单独标注content的类型，因为TypeScript会自动从mainContent的数组类型推断出来，所以这段代码也可以简化成：

{mainContent.map((content, index) =>
  <div key={index}>{content}</div>
)}

这样是不是清爽多了？

备注：内容来源于stack exchange，提问作者Lushmoney