Question

我有一个自定义反应输入组件。我希望我的所有输入都在它们旁边有一个小提示（一个星号），在悬停时显示一个提示。问题是我无法将弹出点初始化为精确的asterix，因此它显示了此特定组件的消息。现在它只是用最后安装的组件的消息替换消息。

我的问题是 - 我将如何引用确切的元素。我可以从didMount获取React ID吗？我可以使用渲染指向它，例如$（this.render（）+＆＃39; i＆＃39;） - ＆gt; （理想情况）。

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

1 个答案: