-
Notifications
You must be signed in to change notification settings - Fork 46.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Ref is not passed through a HOC #9348
Comments
Thanks for the request @Deepblue129, there's an existing issue at #4213 tracking this. If you have any additional input, please share it there! |
you can use callback instead. here is example class Foo extends React.Component {
componentDidMount() {
this.props.onRef(this);
}
render() {
return
}
}
export default Foo; import Foo from './foo';
class App extends React.Component {
render() {
<Foo onRef={foo => this.foo=foo} />
}
} |
@ggd543 |
@ggd543 Thanks a lot! |
@ggd543 Dam dude !! this worked for me. |
You don't need this workaround now — React 16.3 and later supports ref forwarding. |
just want to suggest little HOC const withRef = Component => React.forwardRef((props, ref) => <Component {...props} forwardedRef={ref} />); |
@gaearon What should one do when the third party HOC that's being used does not support ref forwarding? |
Do you want to request a feature or report a bug?
Feature
What is the current behavior?
The parent component of a child component wrapped in a HOC cannot assign a ref attribute to the child component. The ref attribute instead refers to the HOC.
In order for the parent component to reference the child component, it must use some of the below popular workarounds:
onRef prop
kriasoft/react-starter-kit#909
innerRef prop
styled-components/styled-components#122
getInstance func
christianalfoni/formsy-react#308
What is the expected behavior?
In accordance with the decorator pattern, a child wrapped with a HOC should not be less accessible than a child not wrapped with a HOC. It is expected that the ref attribute pass through the HOC.
The text was updated successfully, but these errors were encountered: