react runtime_error ai_generated true

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

Warning: Invalid DOM property `class`. Did you mean `className`?

ID: react/invalid-dom-prop-class

其他格式: JSON · Markdown 中文 · English
100%修复率
90%置信度
1证据数
2023-01-20首次发现

版本兼容性

版本状态引入弃用备注
React 16.0.0 active — — —
React 17.0.2 active — — —
React 18.2.0 active — — —

根因分析

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

English

Using the HTML attribute `class` instead of the JSX attribute `className` in a React component, which React interprets as an unknown DOM property.

generic

官方文档

https://reactjs.org/docs/dom-elements.html#classname

解决方案

  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.

无效尝试

常见但无效的做法:

  1. 10% 失败

    This is not a fix for the error; the error only occurs when `class` is used instead of `className`.

  2. 20% 失败

    This addresses a different issue (label's `for` attribute) but does not fix the `class` -> `className` problem.

  3. 30% 失败

    The error is specifically about the `class` property; using `data-class` or similar avoids the warning but does not apply CSS classes.