TypeScript+React中push Option元素到string数组报类型不匹配怎么解决

你代码里的children变量被显式声明为string[]（字符串数组）类型，但你在循环中往数组内插入的是<Option /> React组件实例，两种类型不匹配，因此触发TypeScript类型校验报错。

方案1：直接修正数组类型 #

将children的类型修改为可容纳React元素的类型即可，推荐用React.ReactNode[]（兼容性最强，可容纳所有合法的React可渲染节点），修改后的代码如下：

import { Row, Col, Select, Button, Card } from "antd";
import React, { FC } from "react";

const Option = Select.Option;
// 仅需修改此处的类型声明即可
const children: React.ReactNode[] = [];
for (let i = 10; i < 36; i++) {
    children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}

如果你的数组内只会存放JSX元素，也可以用更精准的JSX.Element[]类型。

方案2：使用Antd Select推荐的options属性（写法更简洁） #

Antd的Select组件支持直接通过options属性配置选项，不需要手动创建Option组件，写法更简洁也更不容易出类型问题，示例如下：

import { Row, Col, Select, Button, Card } from "antd";
import React, { FC } from "react";

// 定义和Select组件要求匹配的options数组
const options: { value: string; label: string }[] = [];
for (let i = 10; i < 36; i++) {
  const val = i.toString(36) + i;
  options.push({ value: val, label: val });
}

// 使用时直接传给Select组件即可
// <Select options={options} 其他配置 />

内容的提问来源于stack exchange，提问作者Amine Aamer