在didMount中獲取React唯一ID

Question

我有一個自定義的反應輸入組件。我希望我的所有輸入都有一個提示旁邊的小提示（一個星號），以便懸停顯示提示。問題是我無法將彈出點初始化爲這個確切的asterix，因此它顯示了這個特定組件的消息。現在它只是用最後一個安裝組件的消息替換消息。

我的問題是 - 我將如何引用確切的元素。我可以從didMount獲取React ID嗎？我可以使用渲染指向它，例如$（this.render（）+'i'） - >（理想情況）。

import React, { Component, PropTypes } from 'react' 

export default class Input extends Component { 

    componentDidMount() { 
    var html = this.props.popup; 
    console.log(this); 
    $('.inverted.asterisk.icon').popup({ 
     html: html, 
     variation: 'inverted' 
    }); 
    } 

    render() { 
    return (
     <div className="ui icon fluid input"> 
     <input 
       type={this.props.type} 
       value={this.props.value} 
       onChange={this.props.onChange} 
       name={this.props.name} 
     /> 
     <i className="inverted disabled asterisk link icon" /> 
     </div> 
    ) 
    } 
} 

Input.propTypes = { 
    type: PropTypes.string, 
    name: PropTypes.string, 
    popup: PropTypes.string, 
    value: PropTypes.node, 
    onChange: PropTypes.func 
} 

Answer 1

您可以將ref屬性分配給渲染函數中的任何元素以獲取對其的引用。

指定裁判

<i ref="icon" className="inverted disabled asterisk link icon" /> 

使用它在componentDidMount

componentDidMount() { 
    var html = this.props.popup; 
    console.log(this); 
    $(this.refs.icon).popup({ 
     html: html, 
     variation: 'inverted' 
    }); 
    } 

jsfiddle example