在 React 中获取组件名称

小能豆

在 React 中获取组件名称

javascript

我正在开发一个 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。也许这不是正确的做法。

阅读 87

2024-06-02

小能豆

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

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。

2024-06-02

小能豆

类组件

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

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

警告：如果您使用 Webpack 进行生产最小化，则这将不起作用。

功能组件

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

2024-06-02

在 React 中获取组件名称

共2个答案

类组件

功能组件