-
Notifications
You must be signed in to change notification settings - Fork 559
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
findDOMNode for function components #105
Comments
Hey @thysultan There is a good pattern which allows to reuse refs and void merging logic. const elementRef = React.useRef(null);
return (
<Popup contentRef={elementRef}>
<div ref={elementRef}>
</div>
</Popup>
) There is also another proposal which allows to keep refs inside the component. But it's still RFC without implementation. #97 |
Yes, this is an alternative API to the one mentioned in #97. I'm not sure i understand your example though. The mentioned use case is when the component in question is not responsible for what it renders thus just returns |
My example allows parent component pass ref to your component. It's just a bit more work for consumer. |
I too am looking for a way to obtain a ref to the top-level child on a component that only renders its children. With class-based components one can do class Component extends React.Component {
componentDidMount() {
const root = ReactDOM.findDOMNode(this);
// `root` now refers to the top-level child and we can do a side-effect on it
}
render() {
return this.props.children;
}
} Any way to do the same on a functional component without rendering useless wrappers? |
You could use |
It could work via adding a Ultimately, I don't think it's possible to replicate the above |
One solution could be to support a function Component({children}) {
const ref = useRef(null);
useEffect(() => {
// `ref.current` now refers to the first non-empty child
})
return (
<Fragment ref={ref}>
{children}
</Fragment>
)
} The behaviour of
|
See #97 |
Yep exactly what I had in mind. Maybe close this issue in favor of #97? |
Hi, thanks for your suggestion. RFCs should be submitted as pull requests, not issues. I will close this issue but feel free to resubmit in the PR format. |
I have a idea: |
A
ReactDOM.findDOMNode
equivalent API for function components.Any container component that doesn't render it's own view would benefit from this addition, for example:
The text was updated successfully, but these errors were encountered: