如何使用更高阶的组件动态设置displayName？

Question

我正在尝试动态设置displayName，因为每个组件都呈现为<Component ... />并且无法进行调试。到目前为止，我已经在每个组件上设置了static displayName并且它工作正常，这只是很多重复的代码。

许多组件扩展了此组件，因此结果完全由未命名的组件构成。如何在扩展Component的每个组件上保存static displayName设置？

根组件

export class Component extends React.Component {
  static component = 'span';
  static style = {
    base: {}
  };

  constructor() {
    super(...arguments);
    this.style = this.constructor.style;
    this.switches = this.constructor.switches;
    this.component = this.constructor.component;
    // this.displayName = this.constructor.displayName;
  }

  getRenderProps() {
    ...
    return props;
  }

  render() {
    return React.createElement(this.component, this.getRenderProps(), this.props.children);
  }
}

其他课程

class SomeClass extends Component {
   ...
}

SomeClass现在呈现为<Component>，除非在其上明确设置static displayName，导致：

Answer 1

const decorate = <P extends object>(
    Component: React.ComponentType<P>,
    displayName?:string
  ): React.FC<P> => ({
      ...props
  }: P) =>{
      const WithName = withStyles({})(Component as React.FC) 
      WithName.displayName = displayName
    return <WithName {...props as P} />
  }

然后像这样使用：

（注意！需要在组件之外）

const MyComp = decorate(Compo, "MyComp")

如果有人找到更简洁的方法，请标记我的名字