在React中获取组件名称

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

这里是我打电话给我的加载组件（具有this.state.displayLoading在true或false）：

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

我想在我的变量loadingFrom，这是一个className “LoginForm的”。也许这不是正确的做法。

来源

2017-05-05 Vincent ROSSIGNOL

'<装载loadingFrom = “LoginForm的”/>' –

所以，你的登录表单管理自身的负荷状态？根据你在幕后使用哪种技术，这可能会产生一些问题 – Icepickle

我宁愿有一个this.component.name或类似的东西，有可能吗？ –

你不需要它，因为你是你自己写的组件，可以把它作为一个字符串

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

来源

2017-05-05 09:10:45

每React.Component是动态的，有一个名为displayName属性，JSX自动设置，所以理论上可以使用该财产

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

来源

2017-05-05 09:12:19 Icepickle

我想我读了this.displayName只用于调试否？ –

React将此用于调试，如链接页面中所述，它实际上是JSX框架的一部分 – Icepickle

这是一个有点隐蔽，但我设法找出this._reactInternalInstance.getName()返回在运行时组件的名称调试器摆弄。

例如：

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

来源

2017-08-15 20:52:19 namero999

看起来很神奇，但它对我无效。它说'TypeError：this._reactInternalInstance.getName不是一个函数'，我在渲染里面运行它.. – SudoPlz

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

（使用阵营16.x截至记者发稿）

来源

2018-01-31 20:16:43

在React中获取组件名称

回答

相关问题