在 didMount 中获取 React 唯一 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 属性分配给渲染函数内的任何元素以获取对其的引用。

分配裁判

<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

在 didMount 中获取 React 唯一 ID

Getting React unique ID in didMount

components

input

reactjs

semantic-ui