react runtime_error ai_generated true

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

ID: react/forwardref-params-error

Also available as: JSON · Markdown · 中文
92%Fix Rate
86%Confidence
1Evidence
2023-07-01First Seen

Version Compatibility

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

Root Cause

A function component is defined with more than two parameters (e.g., props, ref, extraParam) while using forwardRef, but forwardRef expects exactly two parameters.

generic

中文

函数组件在使用 forwardRef 时定义了超过两个参数（例如 props、ref、extraParam），但 forwardRef 期望正好两个参数。

Official Documentation

https://reactjs.org/docs/forwarding-refs.html

Workarounds

  1. 95% success Remove the extra parameter and use props object directly: `const MyComponent = React.forwardRef((props, ref) => { const { extraParam, ...rest } = props; return <div ref={ref}>...</div>; });` 
    Remove the extra parameter and use props object directly: `const MyComponent = React.forwardRef((props, ref) => { const { extraParam, ...rest } = props; return <div ref={ref}>...</div>; });`
  2. 90% success If you need additional parameters, pass them via props: `<MyComponent extraParam={value} />` and access `props.extraParam` inside the forwardRef function. 
    If you need additional parameters, pass them via props: `<MyComponent extraParam={value} />` and access `props.extraParam` inside the forwardRef function.

中文步骤

  1. Remove the extra parameter and use props object directly: `const MyComponent = React.forwardRef((props, ref) => { const { extraParam, ...rest } = props; return <div ref={ref}>...</div>; });`
  2. If you need additional parameters, pass them via props: `<MyComponent extraParam={value} />` and access `props.extraParam` inside the forwardRef function.

Dead Ends

Common approaches that don't work:

  1. Ignoring the warning and passing extra parameters anyway 80% fail

    React will ignore the extra parameters, and the component may not behave as expected.

  2. Using a class component instead of a function component with forwardRef 50% fail

    Class components handle refs differently; you may lose the benefits of forwardRef or cause other errors.

  3. Wrapping the component in another HOC that passes extra props 60% fail

    This adds complexity without fixing the root cause; the extra parameter is still passed to the forwardRef function.