{
  "id": "react/invalid-dom-prop-class",
  "signature": "Warning: Invalid DOM property `class`. Did you mean `className`?",
  "signature_zh": "警告：无效的 DOM 属性 `class`。您是指 `className` 吗？",
  "regex": "Warning: Invalid DOM property `class`",
  "domain": "react",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "Using the HTML attribute `class` instead of the JSX attribute `className` in a React component, which React interprets as an unknown DOM property.",
  "root_cause_type": "generic",
  "root_cause_zh": "在 React 组件中使用了 HTML 属性 `class` 而不是 JSX 属性 `className`，React 将其解释为未知的 DOM 属性。",
  "versions": [
    {
      "version": "React 16.0.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 17.0.2",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 18.2.0",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "",
      "why_fails": "This is not a fix for the error; the error only occurs when `class` is used instead of `className`.",
      "fail_rate": 0.1,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "This addresses a different issue (label's `for` attribute) but does not fix the `class` -> `className` problem.",
      "fail_rate": 0.2,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "The error is specifically about the `class` property; using `data-class` or similar avoids the warning but does not apply CSS classes.",
      "fail_rate": 0.3,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Replace all occurrences of `class` with `className` in JSX elements: `<div className=\"my-class\">Content</div>`",
      "success_rate": 1.0,
      "how": "Replace all occurrences of `class` with `className` in JSX elements: `<div className=\"my-class\">Content</div>`",
      "condition": "",
      "sources": []
    },
    {
      "action": "If using a library that generates JSX (like Babel with custom pragma), ensure the pragma or plugin converts `class` to `className` automatically.",
      "success_rate": 0.8,
      "how": "If using a library that generates JSX (like Babel with custom pragma), ensure the pragma or plugin converts `class` to `className` automatically.",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "Replace all occurrences of `class` with `className` in JSX elements: `<div className=\"my-class\">Content</div>`",
    "If using a library that generates JSX (like Babel with custom pragma), ensure the pragma or plugin converts `class` to `className` automatically."
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://reactjs.org/docs/dom-elements.html#classname",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.9,
  "fix_success_rate": 1.0,
  "resolvable": "true",
  "first_seen": "2023-01-20",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}