React TS中ul标签className类型报错：不存在于DetailedHTMLProps的解决方法

报错核心原因 #

TypeScript无法正确识别<ul>元素的类型定义，导致判定className不属于该元素的合法属性。

具体解决步骤 #

1. 导入React核心模块 #

在组件文件顶部添加React的导入语句，这是TSX文件类型系统正常工作的基础（React 17以下版本必须显式导入，17+版本显式导入可避免类型歧义）：

import React, { MouseEvent } from "react";

2. 检查tsconfig.json配置 #

确保配置文件中包含以下关键项，保证TypeScript能识别DOM相关类型：

{
  "compilerOptions": {
    "jsx": "react-jsx", // React 17+ 使用该值，旧版本用"react"
    "lib": ["dom", "es2015"] // 必须包含"dom"以支持DOM元素属性类型
  }
}

3. 完善MouseEvent类型定义 #

给handleClick的MouseEvent指定目标元素类型，避免隐式类型问题：

const handleClick = (event: React.MouseEvent<HTMLLIElement>) => console.log(event);

修正后的完整代码 #

import React, { MouseEvent } from "react";

function ListGroup() {
  let items = ["New York", "Chicago", "Minnepolis", "Des Moines", "Tampa"];

  const handleClick = (event: MouseEvent<HTMLLIElement>) => console.log(event);

  return (
    <>
      <h1>List</h1>
      <ul className="list-group">
        {items.length === 0 && <p>No Items Found</p>}
        {items.map(item => (
          <li className="list-group-item" key={item} onClick={handleClick}>
            {item}
          </li>
        ))}
      </ul>
    </>
  );
}

export default ListGroup;

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