react runtime_error ai_generated true

Warning: forwardRef render functions accept exactly two parameters: props and ref. Did you accidentally pass children as a separate prop?

ID: react/forwardref-children-prop

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

Version Compatibility

VersionStatusIntroducedDeprecatedNotes
React 16.8+ active — — —
React 17.x active — — —
React 18.x active — — —

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.

generic

中文

使用 React.forwardRef 时，渲染函数签名是 (props, ref) => JSX。将 children 作为第三个参数传递或错误解构 ref 会导致此警告，常见于包装一个期望 children 作为 prop 的组件时。

Official Documentation

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

Workarounds

  1. 95% success 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>); 
    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>);
  2. 90% success If using TypeScript, define the component with React.PropsWithChildren<P> and forwardRef: const MyComponent = React.forwardRef<HTMLDivElement, React.PropsWithChildren<{}>>((props, ref) => ...); 
    If using TypeScript, define the component with React.PropsWithChildren<P> and forwardRef: const MyComponent = React.forwardRef<HTMLDivElement, React.PropsWithChildren<{}>>((props, ref) => ...);
  3. 75% success For class components, avoid forwardRef and use a callback ref pattern: <div ref={(node) => { this.myRef = node; }}> 
    For class components, avoid forwardRef and use a callback ref pattern: <div ref={(node) => { this.myRef = node; }}>

中文步骤

  1. 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>);
  2. If using TypeScript, define the component with React.PropsWithChildren<P> and forwardRef: const MyComponent = React.forwardRef<HTMLDivElement, React.PropsWithChildren<{}>>((props, ref) => ...);
  3. For class components, avoid forwardRef and use a callback ref pattern: <div ref={(node) => { this.myRef = node; }}>

Dead Ends

Common approaches that don't work:

  1. 95% fail

    React's forwardRef only passes two arguments; the third parameter is always undefined.

  2. 85% fail

    React does not pass ref through props; it's a separate argument. This breaks ref forwarding.

  3. 70% fail

    Overcomplicates the component hierarchy without fixing the forwardRef signature mismatch.