Skip to content
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

How can I get DOM on the React Hook? #16699

Closed
karmiy opened this issue Sep 7, 2019 · 8 comments
Closed

How can I get DOM on the React Hook? #16699

karmiy opened this issue Sep 7, 2019 · 8 comments

Comments

@karmiy
Copy link

karmiy commented Sep 7, 2019

In the class component,we can use ReactDom.findDOMNode(this) to get DOM element:

class Collapse {
componentDidMount() {
ReactDom.findDOMNode(this) ;
}
return this.props.children;
}

But how can I get it in React Hook without 'this';

@Dergash
Copy link

Dergash commented Sep 7, 2019

Hello @karmiy! Accessing DOM elements of function components is handled with refs. You should look into useRef hook and Forwarding Refs article for more info.

@karmiy
Copy link
Author

karmiy commented Sep 7, 2019

Thanks for your answer!
I know useRef hook and Forwarding Refs.
I may not have expressed it well, but what I want to know is, in this case, How do I get the DOM of the collapse panel component instance itself in function component:

function Collapse(props) {
useEffect(() => {
// ... I want to get my own DOM here
})
return props.children;
}

@karmiy
Copy link
Author

karmiy commented Sep 7, 2019

I don't want to add any extra elements like this:

function Collapse(props) {
const ref = useRef(null);
useEffect(() => {
console.log(ref.current);
})
return (
<div ref={ref}>
{props.children}
</div>
)
}

I don't want to put this DIV element on the outside.
Only return props.children

@Dergash
Copy link

Dergash commented Sep 7, 2019

I think you will be interested in reactjs/rfcs#97 then, it's a proposal about fragment references which specifically allows you to avoid introducing wrapper containers.

I also have a code sample for you,
it shows how to pass a reference to your props.children without extra DOM wrappers, but I agree that it might be not sufficient for your specific use case.

@threepointone
Copy link
Contributor

I'm closing this since it isn't a bug or feature request per se, but feel free to carry on the conversation. I would also recommend using one of our community resources https://reactjs.org/community/support.html.

@karmiy
Copy link
Author

karmiy commented Sep 8, 2019

Now it seems that ref cannot be used in <Fragment> like:
<Fragment ref={fragmentRef}>
...
</Fragment>

@Dergash
Copy link

Dergash commented Sep 8, 2019

That is why I also provided a link to RFC about Fragment refs :)
Anyway, you use Fragments to avoid wrapper element, but if you don't have a wrapper, what element are you trying to get then? findDOMNode gives you a first element, and you could recreate this behavior with method from the code sample

@hengkx
Copy link

hengkx commented May 6, 2020

Is there a better solution?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

4 participants