在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中獲取組件名稱

回答

相關問題