search

maslianok / react-resize-detector

A Cross-Browser, Event-based, Element Resize Detection for React
http://maslianok.github.io/react-resize-detector/
MIT License
1.25k stars 91 forks source link

React Warning: "React does not recognize the `targetRef` prop on a DOM element." #113

Closed joecarver closed 3 years ago

joecarver commented 3 years ago

This error displays in the browser console when using react-resize-detector with children that are class or functional components.

I believe the error is because the targetRef property is only removed from elements in certain cases, i.e. when the child is a native DOM element, but not when the element is a component.

joecarver commented 3 years ago

On further inspection, I noticed that targetRef doesn't actually have to be passed to the child component at all (in my use case), so my PR just removes it from childProps inside render(). I can use a more fine grained solution if this is a breaking change.

maslianok commented 3 years ago

Hey @joecarver, Thanks for your investigation and pull request!

I don't think we can simply remove targetRef from the child component. Maybe it will solve your problem but it may add other bugs (for example, in HOC approach we use that ref).

Today I published a new major release (v6.0.0-alpha.1). Can you please update and check if the bug still persist? There is a small chance that it's gone with other improvements.

Otherwise please provide a code-snippet that reproduces the above problem.

Thanks in advance!

joecarver commented 3 years ago

Hi @maslianok, thanks for the reply! That's OK, I figured that would probably be the case. We are using a forked version with my change.

I just tried with the new version and unfortunately the problem still persists. I will try find time to put together a reproduction soon, but as I said we are using a fork so we're OK for the time being.

Thank you anyway for the very nice library!

maslianok commented 3 years ago

Thank you 🙌

I'm going to close this issue. If, at some point, you will decide to discuss the problem - let me know

Scong commented 3 years ago

For those of you who run into this issue, I believe this happens when ReactResizeDetector has react children and you set a targetRef.

ReactResizeDetector should have no children or follow the Child Function Pattern probably to fix it.

https://github.com/maslianok/react-resize-detector#3-child-function-pattern