Ad

Pass This.refs As Property In Jsx In React.js

- 1 answer

I'm trying to pass 1 node as a property of another React component like this:

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

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

Is there anything wrong with my code?

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

Ad

Answer

After typing this I realized it's really not an answer to the original question but instead a follow-up to your request for suggestions in your comment above. If you really don't believe it should stay, I'll delete it but it's too big for a comment, sorry.

Reference material

You must be using an old version of React, so this may not look right to you at first, but you could track that information using state in that parent component by doing

ref={ function ( element ) {

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

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

Assuming those values change over time, you'll want to add an event listener for that change (which can be added inside that ref setup) and have it run that setState again when you need it to re-render.

As for <Popover trigger= you'll want to do something to the effect of:

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

...where 999 is whatever your trigger value would be. If it returns true, then you render Popover. If not, you destroy it. Both situations would be handled inside Popover but will not need to touch that div

Of course, good practice in React is to do that comparison at the top of render() and place the result into a variable like isTriggered.

Ad
source: stackoverflow.com
Ad