如何在TypeScript和React中创建HTML按钮数组？

你代码里的核心问题是类型概念搞混了：React里的<button> JSX语法生成的是React元素（ReactElement），不是浏览器真实的HTMLButtonElement DOM节点——真实DOM节点只有组件挂载到页面后才会存在，而你现在是在构建要渲染的React元素列表，所以类型定义完全错了。

下面是具体的修正方案：

1. 直接修正数组类型 #

把数组的类型从HTMLButtonElement[]改成React提供的元素类型，两种选择：

• React.ReactElement[]：更精确，专门指代React元素
• React.ReactNode[]：更宽泛，能容纳所有React可渲染的内容（比如文本、Fragment等）

import React from 'react';

// 精确类型写法
let buttons: React.ReactElement[] = [];
// 或者宽泛类型写法
// let buttons: React.ReactNode[] = [];

for (let [key, value] of SomeMap) {
  // 必须加key属性，这是React列表渲染的强制要求
  buttons.push(<button key={key} onClick={() => { /* 你的点击逻辑 */ }}>{value}</button>);
}

2. 更简洁的遍历写法 #

直接用Array.from把Map转成数组并生成按钮，TypeScript会自动推断类型，无需手动声明：

import React from 'react';

const buttons = Array.from(SomeMap.entries(), ([key, value]) => (
  <button key={key} onClick={() => { /* 你的点击逻辑 */ }}>{value}</button>
));

如果你确实需要真实DOM节点（比如操作DOM） #

如果你的需求不是渲染按钮，而是要获取真实的HTMLButtonElement DOM对象，不能在JSX构建阶段直接存储，得用useRef来引用DOM节点：

import React, { useRef, useEffect } from 'react';

const ButtonList = () => {
  // 创建ref数组存储真实DOM节点
  const buttonRefs = useRef<HTMLButtonElement[]>([]);

  useEffect(() => {
    // 组件挂载后，buttonRefs.current里就有真实DOM节点了
    console.log(buttonRefs.current);
  }, []);

  return (
    <div>
      {Array.from(SomeMap.entries(), ([key, value], index) => (
        <button
          key={key}
          ref={el => buttonRefs.current[index] = el!}
          onClick={() => { /* 你的点击逻辑 */ }}
        >
          {value}
        </button>
      ))}
    </div>
  );
};

内容的提问来源于stack exchange，提问作者four-eyes