Pass this.refs as a property in jsx in React.js

Question

I am trying to pass 1 node as a property of another React component as follows:

  render: function() {
    return (
      <div>
        <div ref='statusCircle'></div>
        <Popover trigger={ this.refs.statusCircle }></Popover>
      </div>);
    );
  }

But in Popover, this .props.trigger is NULL.

Is there something wrong with my code?

How to pass node -ref parameter to another React component as a property?

Answer 1

After entering this message, I realized that this is really not the answer to the original question, but instead the subsequent answer to your request for proposals in your comment above. If you really do not believe that he should stay, I will delete him, but he is too big for comment, sorry.

Reference material

React, , , ,

ref={ function ( element ) {

    // at the top of render() put
    //    var self = this;

    self.setState({ 
        circleWidth: element.offsetWidth, 
        circleHeight: element.offsetHeight 
    }) 
}

, , ( ref) setState , , .

<Popover trigger=, -, :

<Popover trigger={this.state.circleWidth > 999} />

... 999 - . true, Popover. , . Popover, div

, React , render() isTriggered.

Answer 2

React. . :

. https://jsfiddle.net/uzvoruf7/
, "" .

var Popover = React.createClass({
  render: function() {
    return (<div>This is a pop-over</div>);
  }
});

var Composite = React.createClass({
  componentDidMount: function() {
    console.log(this.refs.statusCircle); //ok, exists.
  },
  render: function() {
    console.log(this.refs.statusCircle); //doesn't exist, sorry.
    return (
      <div>
        <div ref='statusCircle'></div>
        <Popover trigger={this.refs.statusCircle}></Popover>
      </div>
    );
  }
});

ReactDOM.render(
  <Composite />,
  document.getElementById('container')
);

"refs" DOM.

, dom , null ( ).

DidMount , , .

: , . ( ), -dom- . , .