javascript - 如何在箭头函数 HOC 中设置 Component displayName

Question

我正在尝试弄清楚如何将显示名称添加到我的 HOC 并从以下代码中删除注释 eslint-disable-next-line react/display-name:

const withMyHOC = () => <P extends MyProps>(WrappedComponent: React.ComponentType<P>):
    React.FunctionComponent<P> => {
    // eslint-disable-next-line react/display-name
    return (props: P): ReactElement => (
        <MyComponent>
            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
            <WrappedComponent {...props} />
        </MyComponent>);
};

我找到了以下解决方案:

const withMyHOC = () => <P extends MyProps>(WrappedComponent: React.ComponentType<P>):
    React.FunctionComponent<P> => {
    const innerHOC = (props: P): ReactElement => (
        <MyComponent>
            {/* eslint-disable-next-line react/jsx-props-no-spreading */}
            <WrappedComponent {...props} />
        </MyComponent>);
    return innerHOC;
};

但我觉得不太好看。

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")