react 高阶组件设置显示名称

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