如何在箭头函数 HOC 中设置组件 displayName答案

【问题标题】：How to set Component displayName in arrow function HOC如何在箭头函数 HOC 中设置组件 displayName
【发布时间】：2020-02-26 02:01:38
【问题描述】：

我正在尝试弄清楚如何将 displayname 添加到我的 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;
};

但我觉得不好看。

【问题讨论】：

标签： javascript reactjs typescript eslint

【解决方案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")

【讨论】：