# 警告：无效的 DOM 属性 `class`。您是指 `className` 吗？

- **ID:** `react/invalid-dom-prop-class`
- **领域:** react
- **类别:** runtime_error
- **验证级别:** ai_generated
- **修复率:** 100%

## 根因

在 React 组件中使用了 HTML 属性 `class` 而不是 JSX 属性 `className`，React 将其解释为未知的 DOM 属性。

## 版本兼容性

| 版本 | 状态 | 引入 | 弃用 |
|------|------|------|------|
| React 16.0.0 | active | — | — |
| React 17.0.2 | active | — | — |
| React 18.2.0 | active | — | — |

## 解决方案

1. ```
   Replace all occurrences of `class` with `className` in JSX elements: `<div className="my-class">Content</div>`
   ```
2. ```
   If using a library that generates JSX (like Babel with custom pragma), ensure the pragma or plugin converts `class` to `className` automatically.
   ```

## 无效尝试

- **** — This is not a fix for the error; the error only occurs when `class` is used instead of `className`. (10% 失败率)
- **** — This addresses a different issue (label's `for` attribute) but does not fix the `class` -> `className` problem. (20% 失败率)
- **** — The error is specifically about the `class` property; using `data-class` or similar avoids the warning but does not apply CSS classes. (30% 失败率)