question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Getting at the wrapped React component when exporting withStyles

See original GitHub issue

Is it possible to get at the React class wrapped by WithStyles?

Context: getting the ref to a child component e.g.

<MyComponent ref="myComponent"></MyComponent>

Trying to reference this.refs.myComponent gives me a WithStyles object obviously and not a MyComponent object.

Issue Analytics

  • State:closed
  • Created 6 years ago
  • Reactions:4
  • Comments:17 (12 by maintainers)

github_iconTop GitHub Comments

45reactions
oliviertassinaricommented, May 31, 2019

@snydersaurus withStyles enhance the components with an innerRef property. You can use it.

<MyComponent innerRef={node => this.myComponent = node} />

Edit for v4: this workaround is no longer needed. You can simply provide a ref now.

1reaction
joshwoodingcommented, Apr 12, 2019

@mbrucher can you create a new issue with a reproduction please 😃

Read more comments on GitHub >

github_iconTop Results From Across the Web

Getting at the wrapped React component when exporting ...
Is it possible to get at the React class wrapped by WithStyles? Context: getting the ref to a child component e.g. Trying to...
Read more >
withStyles component wrap - reactjs - Stack Overflow
The problem is because the withStyles HOC return a new component so you are getting the reference of the HOC. You can use...
Read more >
Reactjs – How to shallow test a react component wrapped in memo ...
The only option I am currently aware of is to independently export Demo and export default withStyles(styles)(Demo) . This allows me to test...
Read more >
How To Use React Styled Components Efficiently - Copycat
Learn how to set up organized React styled components in your project through examples, comprehensive explanations, and tips and tricks!
Read more >
How to Wrap One React Component into Another | Pluralsight
It's quite easy to apply a HOC to any component; we just need to import the required HOC function and wrap our original...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found