react runtime_error ai_generated true

Warning: forwardRef render functions accept exactly two parameters: props and ref. Did you mean to pass a ref?

ID: react/forwardref-children-prop-warning

Also available as: JSON · Markdown · 中文
85%Fix Rate
88%Confidence
1Evidence
2023-09-15First Seen

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
[email protected] active — — —
[email protected] active — — —

Root Cause

A component wrapped in React.forwardRef is receiving more than two arguments (e.g., props, ref, and an extra third argument like children) in its render function, which violates the forwardRef signature.

generic

中文

使用 React.forwardRef 包装的组件在其渲染函数中接收了超过两个参数（例如 props、ref 和额外的第三个参数如 children），这违反了 forwardRef 的签名。

Official Documentation

https://react.dev/reference/react/forwardRef

Workarounds

  1. 90% success Change the forwardRef render function to accept exactly two parameters: props and ref. Access children via props.children. 
    Change the forwardRef render function to accept exactly two parameters: props and ref. Access children via props.children.
  2. 85% success If using TypeScript, ensure the forwardRef type signature matches: React.forwardRef<RefType, PropsType>((props, ref) => ...) 
    If using TypeScript, ensure the forwardRef type signature matches: React.forwardRef<RefType, PropsType>((props, ref) => ...)

中文步骤

  1. Change the forwardRef render function to accept exactly two parameters: props and ref. Access children via props.children.
  2. If using TypeScript, ensure the forwardRef type signature matches: React.forwardRef<RefType, PropsType>((props, ref) => ...)

Dead Ends

Common approaches that don't work:

  1. Adding a third parameter to the forwardRef render function to accept children explicitly 95% fail

    React.forwardRef only provides two arguments; any extra parameter will be undefined and the warning persists.

  2. Wrapping the component in another HOC that passes children as a separate prop 80% fail

    The underlying forwardRef still receives the extra argument; the warning is about the render function signature, not prop structure.

  3. Ignoring the warning as it doesn't break the app immediately 70% fail

    The warning indicates potential ref forwarding issues that can cause bugs with focus management or third-party libraries.