{
  "id": "react/forwardref-children-prop",
  "signature": "Warning: forwardRef render functions accept exactly two parameters: props and ref. Did you accidentally pass children as a separate prop?",
  "signature_zh": "警告：forwardRef 渲染函数只接受两个参数：props 和 ref。你是否意外地将 children 作为单独的参数传递了？",
  "regex": "Warning: forwardRef render functions accept exactly two parameters",
  "domain": "react",
  "category": "runtime_error",
  "subcategory": null,
  "root_cause": "When using React.forwardRef, the render function signature is (props, ref) => JSX. Passing children as a third argument or destructuring ref incorrectly causes this warning, often when wrapping a component that expects children as a prop.",
  "root_cause_type": "generic",
  "root_cause_zh": "使用 React.forwardRef 时，渲染函数签名是 (props, ref) => JSX。将 children 作为第三个参数传递或错误解构 ref 会导致此警告，常见于包装一个期望 children 作为 prop 的组件时。",
  "versions": [
    {
      "version": "React 16.8+",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 17.x",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    },
    {
      "version": "React 18.x",
      "introduced": null,
      "deprecated": null,
      "removed": null,
      "behavior_change": null,
      "status": "active"
    }
  ],
  "os_specific": {},
  "dead_ends": [
    {
      "action": "",
      "why_fails": "React's forwardRef only passes two arguments; the third parameter is always undefined.",
      "fail_rate": 0.95,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "React does not pass ref through props; it's a separate argument. This breaks ref forwarding.",
      "fail_rate": 0.85,
      "condition": "",
      "sources": []
    },
    {
      "action": "",
      "why_fails": "Overcomplicates the component hierarchy without fixing the forwardRef signature mismatch.",
      "fail_rate": 0.7,
      "condition": "",
      "sources": []
    }
  ],
  "workarounds": [
    {
      "action": "Ensure the forwardRef callback has exactly two parameters: props and ref. Access children via props.children. Example: const MyComponent = React.forwardRef((props, ref) => <div ref={ref}>{props.children}</div>);",
      "success_rate": 0.95,
      "how": "Ensure the forwardRef callback has exactly two parameters: props and ref. Access children via props.children. Example: const MyComponent = React.forwardRef((props, ref) => <div ref={ref}>{props.children}</div>);",
      "condition": "",
      "sources": []
    },
    {
      "action": "If using TypeScript, define the component with React.PropsWithChildren<P> and forwardRef: const MyComponent = React.forwardRef<HTMLDivElement, React.PropsWithChildren<{}>>((props, ref) => ...);",
      "success_rate": 0.9,
      "how": "If using TypeScript, define the component with React.PropsWithChildren<P> and forwardRef: const MyComponent = React.forwardRef<HTMLDivElement, React.PropsWithChildren<{}>>((props, ref) => ...);",
      "condition": "",
      "sources": []
    },
    {
      "action": "For class components, avoid forwardRef and use a callback ref pattern: <div ref={(node) => { this.myRef = node; }}>",
      "success_rate": 0.75,
      "how": "For class components, avoid forwardRef and use a callback ref pattern: <div ref={(node) => { this.myRef = node; }}>",
      "condition": "",
      "sources": []
    }
  ],
  "workarounds_zh": [
    "Ensure the forwardRef callback has exactly two parameters: props and ref. Access children via props.children. Example: const MyComponent = React.forwardRef((props, ref) => <div ref={ref}>{props.children}</div>);",
    "If using TypeScript, define the component with React.PropsWithChildren<P> and forwardRef: const MyComponent = React.forwardRef<HTMLDivElement, React.PropsWithChildren<{}>>((props, ref) => ...);",
    "For class components, avoid forwardRef and use a callback ref pattern: <div ref={(node) => { this.myRef = node; }}>"
  ],
  "transition_graph": {
    "leads_to": [],
    "preceded_by": [],
    "frequently_confused_with": []
  },
  "official_doc_url": "https://reactjs.org/docs/forwarding-refs.html",
  "official_doc_section": null,
  "error_code": null,
  "verification_tier": "ai_generated",
  "confidence": 0.85,
  "fix_success_rate": 0.9,
  "resolvable": "true",
  "first_seen": "2023-03-15",
  "last_confirmed": "2024-06-01",
  "last_updated": "2024-06-01",
  "evidence_count": 1,
  "tags": [],
  "locale": "en",
  "aliases": []
}