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

ref error when wrapping stateless functional component #30

Open
atomanyih opened this issue Jun 3, 2016 · 6 comments
Open

ref error when wrapping stateless functional component #30

atomanyih opened this issue Jun 3, 2016 · 6 comments

Comments

@atomanyih
Copy link

If you use Dimensions to wrap a stateless functional component it complains but still seems to work.

const SomebodyCaresAboutDimensions = ({containerWidth} => (
  <div>
    width: {containerWidth}
  </div>
));

export default Dimensions()(SomebodyCaresAboutDimensions);

will give

Warning: Stateless function components cannot be given refs (See ref "wrappedInstance" in SomebodyCaresAboutDimensions created by DimensionsHOC). Attempts to access this ref will fail.

@gmaclennan
Copy link
Member

Thanks for this report. The ref is used for the instance method getWrappedInstance(), so I guess that method will not work for a stateless function component. Not sure what the solution is here, I'll leave this open and if anybody needs this method on a stateless function component they can look into it.

@gmaclennan
Copy link
Member

Just to clarify: this error means that the getWrappedInstance() method will not work for stateless functional components, but everything else should continue to function as normal.

@gmaclennan
Copy link
Member

We should do what redux does and make this opt-in: reduxjs/react-redux@2d3d0be

@gmaclennan
Copy link
Member

Would accept any pull-request that implements the same solution as the linked react-redux code.

Aesthetikx added a commit to Aesthetikx/react-dimensions that referenced this issue Sep 11, 2016
Stateless components cannot use refs, so this adds the withRef option
(enabled by default for compatibility) which enables or disables passing
the wrappedInstance ref to the wrapped component. Addresses issue digidem#30.
Inspired by reduxjs/react-redux@2d3d0be
Aesthetikx added a commit to Aesthetikx/react-dimensions that referenced this issue Sep 11, 2016
Stateless components cannot use refs, so this adds the withRef option
(enabled by default for compatibility) which enables or disables passing
the wrappedInstance ref to the wrapped component. Addresses issue digidem#30.
Inspired by reduxjs/react-redux@2d3d0be
neverfox added a commit to neverfox/react-dimensions that referenced this issue Sep 22, 2016
@oliviertassinari
Copy link

oliviertassinari commented Sep 25, 2016

Another approach would be to use a child function as react-virtualized/AutoSize is doing it
(It's providing the same feature with a different API).

Aesthetikx added a commit to Aesthetikx/react-dimensions that referenced this issue Jan 3, 2017
Stateless components cannot use refs, so this adds the withRef option
(enabled by default for compatibility) which enables or disables passing
the wrappedInstance ref to the wrapped component. Addresses issue digidem#30.
Inspired by reduxjs/react-redux@2d3d0be
@ml242
Copy link

ml242 commented May 30, 2017

Is it possible to merged this in?

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

No branches or pull requests

4 participants