It is basically this issue.
While using code like
class SomeComponent extends React.Component { } export default withRouter(SomeComponent);
I can’t use search usages properly, because it obviously finds the export line.
It can be hacked in functional components like this:
const SomeComponent = withRouter((props) => { //...component here }); export default SomeComponent;
but gets very ugly when using redux for example:
const mapStateToProps = (state, ownProps) => ({ .... }); const SomeComponent = connect(mapStateToProps)({ cartPhotos, digitals, balancePrice, photolabPrice, digitalsPrice, voucher, photosPrice, deliveryPrice, totalPrice, openPhotolabModal, isSidebar, }) => { }); export default SomeComponent;
My questions are:
- Is there a way to overcome this without using such ugly approach?
- Is there a way to overcome this on a class component AT ALL?
Advertisement
Answer
It’s normal that you find only one ref for SomeComponent.
SomeComponent !== your default export
If you press right click on default and search there usages you find all that use it in import.