TL;DR
You cannot locate a DOM node for a functional component. We allow users to pass components and elements into our components. We then sometimes try to locate the DOM node of those passed in components. This results in an error if the user passed a stateless functional component as there is no DOM node.
The solution, create a wrapper class and HOC that locates its own DOM node but renders the child or wrapped component in place.
OK ugly code here, but, I've dug up the experiment I did for this here: http://www.react.run/HJa1BVYQl/24
This would need to be adapted to also work as a HOC rather than only on a child element:
const RefsNotSupported = () = <p>I'm a functional component</p>
<RefsNotSupported ref={node => console.log(node)} />
// => null
const RefsSupported = Ref(RefsNotSupported)
<RefsSupported ref={node => console.log(node)} />
// => <p>I'm a functional component</p>
Finally, this component and HOC would need to be implemented everywhere we use a trigger and or ref. It would also need to be applied in src/lib/getElementType, which powers the as prop, so that all as components can use refs.
If anyone would like to pick this up, that would beyond amazing 馃憤
This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.
Thanks to @rijk, we have improved how we handle stale issues, see #2761. Reopening.
There has been no activity in this thread for 90 days. While we care about every issue and we鈥檇 love to see this fixed, the core team鈥檚 time is limited so we have to focus our attention on the issues that are most pressing. Therefore, we will likely not be able to get to this one.
However, PRs for this issue will of course be accepted and welcome!
If there is no more activity in the next 90 days, this issue will be closed automatically for housekeeping. To prevent this, simply leave a reply here. Thanks!