在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

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

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。