Maintaining ref prop through React.cloneElement()

[pvienneau]

React's 0.13 RC suggests that ref prop on components pushed through React.cloneElement() will allow for two parents to maintain ref props to the same child.

I've tried to replicate this behaviour in a CodePen, but I am not able to maintain two ref references to the same child (ie the ancestor component's ref gets nulled).

Here is the jist of the code, working code found here:

class ChildComponent extends React.Component{
  constructor(props){
    super(props);   
  
    this.onClick = this.onClick.bind(this);
    this.extendsChildren = this.extendChildren(this);
  }
  
  onClick(e) {
    e.preventDefault();
    
    try{
      alert(this._input.value);
    }catch(e){
      alert('ref broken :(');
    }
  }
  
  extendChildren(){
    return React.Children.map(this.props.children, child => {
      return React.cloneElement(
        child,
        {
          ref: ref => this._input = ref
        }
      );
    });
  }
  
  render() {
    return(
      <div>
      <button onClick={this.onClick}>
        ChildComponent ref check
      </button>
      {this.extendChildren()}
    </div>
    );
  }
}


class AncestorComponent extends React.Component{
  constructor(props){
    super(props);
    
    this.onClick = this.onClick.bind(this);
  }
  
  onClick(e) {
    e.preventDefault();
    
    try{
      alert(this._input.value);
    }catch(e){
      alert('ref broken :(');
    }
    
  }
  
  render() {
    return (
    <div>
        <p>
          The expected behaviour is that I should be able to click on both Application and ChildComponent check buttons and have a reference to the input (poping an alert with the input's value).
        </p>
      <button onClick={this.onClick}>
        Ancestor ref check
      </button>
      <ChildComponent>
        <input ref={ref => this._input = ref} defaultValue="Hello World"/>
      </ChildComponent>
    </div>
    );
  }
}

Has this behaviour been dropped/never implemented since the above RC? Or am I doing something wrong?

[gaearon]

I've tried to replicate this behaviour in a CodePen, but I am not able to maintain two ref references to the same child (ie the ancestor component's ref gets nulled).

I think you might have missed this paragraph:

Note: React.cloneElement(child, { ref: 'newRef' }) DOES override the ref so it is still not possible for two parents to have a ref to the same child, unless you use callback-refs.

It's unfortunately not very clear, but the point was that if you override ref it still gets overwritten. The change in RC was related to the case where you just clone but don't override ref.

However, indeed, it is possible to keep both refs with callbacks. You just need to do it manually.
Based on your example:

return React.Children.map(this.props.children, child =>
  React.cloneElement(child, {
    ref: (node) => {
      // Keep your own reference
      this._input = node;
      // Call the original ref, if any
      const {ref} = child;
      if (typeof ref === 'function') {
        ref(node);
      }
    }
  })
);

It’s just functions so you can do something and then delegate to the other function.

[pvienneau]

Ah great. Yes, I misunderstood the meaning behind callback-refs in the docs, but thanks for walking me through a solution. I appreciate it.

[arnemahl]

@gaearon Don't you need to bind the ref(node) function, or turn it into an arrow function, to make it access the correct this?

[gaearon]

Yea I think you're right. You need to.

[gaearon]

Or maybe not. :P

I don't remember whether React takes care to call it with the right instance or not. You can try and let me know.

[arnemahl]

Tested it to make sure :) this was undefined.

Apart from that it works perfectly. Below is the fixed snippet (also added a missing }).

return React.Children.map(this.props.children, child =>
  React.cloneElement(child, {
    ref: (node) => {
      // Keep your own reference
      this._input = node;
      // Call the original ref, if any
      const {ref} = child;
      if (typeof ref === 'function') {
        ref(node);
      }
    }
  })
);

[gaearon]

Thanks! I fixed it up in my comment so that people don't get confused.

[d07RiV]

How does this work - why is ref a property of child itself, and not of its props? Is that implementation detail documented anywhere? Can we rely on it?

[gaearon]

How does this work - why is ref a property of child itself, and not of its props?

Because it doesn't behave like a prop. A component can't read its own ref (by design). Just like key, it's a React-specific property and doesn't become a part of the props.

Can we rely on it?

Yes.