react 高阶组件设置显示名称

最新推荐文章于 2026-04-27 14:00:58 发布

原创最新推荐文章于 2026-04-27 14:00:58 发布 · 3.3k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#react #HOC

收录于

前端专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何在React中为高阶组件(HOC)设置显示名称，通过使用getDisplayName函数获取被包裹组件的默认名称，并结合具体示例代码演示整个过程。

HOC设置显示名称，代码举例

function HOC(WrappedComponent) {
  class HOC extends React.Component {
    render() {
      return <WrappedComponent {...this.props} />;
    }
  }
  HOC.displayName = `HOC(${getDisplayName(WrappedComponent)})`;

  return HOC;
}

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

function getDisplayName(WrappedComponent) {
  return WrappedComponent.displayName || WrappedComponent.name || "Component";
}

const ContainerComponent = HOC(Welcome);

ReactDOM.render(
  <ContainerComponent name="leon" />,
  document.getElementById("root")
);

这样在react developer tools 中HOC显示的就是HOC(Welcome)了