在 React 中获取组件名称

Question

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

这是我如何调用我的加载组件（this.state.displayLoading 为真或假）：

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

我想在我的变量 loadingFrom 中获取“LoginForm”，它是类名。也许这不是正确的方法。

原文由 Vincent ROSSIGNOL 发布，翻译遵循 CC BY-SA 4.0 许可协议

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 一样访问它。

原文由 Shubham Khatri 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

类组件

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

（在撰写本文时使用 React 16.x）

警告：如果您正在使用 Webpack 进行生产缩小，这将不起作用。

功能组件

https://reactjs.org/docs/react-component.html#displayname

原文由 Con Antonakos 发布，翻译遵循 CC BY-SA 4.0 许可协议