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都有一个名为displayName的属性，JSX会自动设置，所以理论上你可以使用该属性

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

更新 （多条评论说它不起作用后）

按照惯例，react提供了一个代码片段，用于将组件名称包装在documentation上，如下所示：

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

这有点隐藏，但摆弄调试器我设法发现this._reactInternalInstance.getName()在运行时返回组件的名称。

例如：

componentDidMount() {
    console.log('mount ' + this._reactInternalInstance.getName());
}

Answer 4

使用调试器搜索后，在较新的版本中，应使用this._reactInternalFiber.elementType.name而不是this._reactInternalInstance.getName()

Answer 5

对于HOC：您可以使用WrappedComponent.name

Answer 6

为了让它在 webpack 构建后工作，你可以为函数分配一个属性

function MyComponent() {
  return (
    <div />
  );
}
MyComponent.componentName = 'MyComponent';

function ParentComponent({ children }) {
  console.log("Children name", children.type.componentName);
}

Answer 7

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

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

在React中获取组件名称

7 个答案: