React DevTools组件栏显示Anonymous，如何修改导出显示组件名？

当用多个高阶组件（HOC）包裹组件后，React DevTools会丢失原始组件名称，显示为Anonymous。可以通过以下两种方式修改导出代码，恢复组件名称显示：

方法1：手动设置组件的displayName #

给包裹后的组件显式设置displayName，让React DevTools识别正确的组件名称：

针对类组件示例1的修改： #

class MyClassComponent extends Component {
// ...code..
}

// 先将包裹后的组件赋值给变量
const WrappedMyClassComponent = connect(mapStateToProps)(withRouter(withStyles(styles)(MyClassComponent)));
// 设置displayName，用原始组件名拼接高阶组件标识
WrappedMyClassComponent.displayName = `Connect(WithRouter(WithStyles(${MyClassComponent.name})))`;
export default WrappedMyClassComponent;

针对类组件示例2的修改： #

class MyOtherClassComponent extends Component {
// ...code..
}

const WrappedMyOtherClassComponent = withStyles(styles)(MyOtherClassComponent);
WrappedMyOtherClassComponent.displayName = `WithStyles(${MyOtherClassComponent.name})`;
export default WrappedMyOtherClassComponent;

方法2：利用高阶组件的内置配置 #

部分高阶组件支持通过配置参数自动设置displayName，比如withStyles可以传入name选项：

class MyOtherClassComponent extends Component {
// ...code..
}

// 直接在withStyles中指定name参数，自动生成正确的displayName
export default withStyles(styles, { name: MyOtherClassComponent.name })(MyOtherClassComponent);

对于connect和withRouter这类Redux、React Router的高阶组件，它们通常会自动根据传入的组件名称生成displayName，但多层嵌套时可能失效，这时候用方法1手动设置更可靠。

内容的提问来源于stack exchange，提问作者kevmull