didMountに固有のIDを取得する

Question

私はカスタム反応入力コンポーネントを持っています。私はすべての入力に、ホバー上にヒントを示す小さなヒント（アスタリスク）を付けることを望みます。問題は、この正確なアスタリスクへのポップアップポイントの初期化を行うことができないため、この特定のコンポーネントのメッセージを表示することです。今のところ、メッセージは最後にマウントされたコンポーネントのメッセージで置き換えられます。

私の質問は、正確な要素をどのように参照するかです。私は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属性を割り当てることができます。

は驚くべきであることcomponentDidMount

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

jsfiddle example