React Dev Tools 在“组件”选项卡中为每个组件显示“匿名”

Question

在浏览器、React-Devtools 的“组件”选项卡中“Context.Privder ...Anonymous”显示整个组件而不是每个组件名称....

我理解这与每个组件的导出方式有关。 在我的应用程序中，我的组件通常看起来像......

class MyClassComponent extends Component {
// ...code..
}
export default connect(mapStateToProps)(withRouter(withStyles(styles)(MyClassComponent));

或者大部分只是“withStyles”...

class MyOtherClassComponent extends Component {
// ...code..
}
export default withStyles(styles)(MyOtherClassComponent)

如何更改“导出”行，以便组件名称显示在 React DevTools 树中？

Answer 1

给它一个显示名称：

const WrappedComponent = withStyles(styles)(MyOtherClassComponent)
WrappedComponent.displayName = MyOtherClassComponent

export default WrappedComponent

但我希望即使没有 displayName，

MyOtherClassComponent

也会出现在开发工具中，它应该首先由

Anonymous

组件（或两个或 10 个，具体取决于您使用的 HOC 数量）包裹。