It is basically this issue.
While using code like
JavaScript
x
6
1
class SomeComponent extends React.Component {
2
3
}
4
5
export default withRouter(SomeComponent);
6
I can’t use search usages properly, because it obviously finds the export line.
It can be hacked in functional components like this:
JavaScript
1
5
1
const SomeComponent = withRouter((props) => {
2
//...component here
3
});
4
export default SomeComponent;
5
but gets very ugly when using redux for example:
JavaScript
1
21
21
1
const mapStateToProps = (state, ownProps) => ({
2
.
3
});
4
5
const SomeComponent = connect(mapStateToProps)({
6
cartPhotos,
7
digitals,
8
balancePrice,
9
photolabPrice,
10
digitalsPrice,
11
voucher,
12
photosPrice,
13
deliveryPrice,
14
totalPrice,
15
openPhotolabModal,
16
isSidebar,
17
}) => {
18
19
});
20
export default SomeComponent;
21
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.