在React中获取组件名称

Question

我正在开发一个React应用程序.我有一个Loading组件,这是一个等待的动画.我想根据调用它的组件在此Loading组件中添加一条消息.

这是我如何调用我的Loading组件(this.state.displayLoading为true或false):

class LoginForm extends React.Component {
    render() {   
        return (
            <div className="login-form-root">
                 {this.state.displayLoading && <Loading loadingFrom={?}/>}
            </div>
        );
    }
}

我想在我的变量loadingFrom中获取"LoginForm",这是className.也许这不是正确的方法.

Answer 1

您可以使用this.constructor.name获取组件的名称.

(在撰写本文时使用React 16.x)

警告:如果您正在使用Webpack缩小生产,这将无效.

Answer 2

每个React.Component都有一个名为displayNameJSX自动设置的属性,所以理论上你可以使用该属性

class LoginForm extends React.Component {
    render() {   
        return (
            <div className="login-form-root">
                {this.state.displayLoading && <Loading loadingFrom={this.displayName}/>}
            </div>
        );
    }
}

更新 (多条评论说它不起作用)

根据惯例,react提供了一个代码片段来包装获取其文档的组件名称,如下所示:

function withSubscription(WrappedComponent) {
  class WithSubscription extends React.Component {/* ... */}
  WithSubscription.displayName = `WithSubscription(${getDisplayName(WrappedComponent)})`;
  return WithSubscription;
}

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

可以看出,他们首先检查显示名称,然后检查组件名称,如果全部失败,那么它将是公正的 'Component'

Answer 3

您不需要它是动态的，因为您自己编写组件并且可以将其作为字符串传递

class LoginForm extends React.Component {
    render() {   
        return (
            <div className="login-form-root">
                 {this.state.displayLoading && <Loading loadingFrom="LoginForm "/>}
            </div>
        );
    }
}

但是，如果您仍然需要访问组件的名称，您可以displayName在组件上定义属性

class LoginForm extends React.Component {
   static displayName = 'LoginForm';
    render() {   
        return (
            <div className="login-form-root">
                 {this.state.displayLoading && <Loading loadingFrom="LoginForm "/>}
            </div>
        );
    }
}

并像这样访问它Component.displayName。