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