在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