Allow multiple refs per element / Multiple elements per ref

[Naman Goel]

This is not a common case, but there are times when it would be great to be able to put multiple refs to the same Element.

Additionally, refs, currently work like ids, where every ref has a one-to-one relationship with a single element. It would be great to be able to have a similar system that works a lot more like a class.

Example:

var App = React.createClass({

  componentDidMount: function(){
    var refs = this.refClass.focussed;

    refs.forEach(function(ref){
      var el = ref.getDOMNode();
      var rect = el.getBoundingClientRect();

      el.classList.add(someFunction(rect));
    });
  },

  render: function(){
    return React.DOM.div({ref: ['container'], refClass:['div', 'focussed']},
      React.DOM.span({ref: ['span'], refClass:['focussed']})
    );
  }

});

The value is not obvious for making general apps, but it makes a whole set of additions on top of React possible. Currently the closest thing we have is a hack workaround where refs are names with sequential names — a1, a2 ...

When in javascript, it should really be possible to just use arrays for things like this, as with sequential names, you need to know the number of refs before hand.

[题叶]

Sounds like jQuery selectors. I've been written in React for months and still don't understand why this is needed. Isn't it better to keep the DOM maintained by React?

[Naman Goel]

There are a few things I want to say here:

1. This won't actually make anything new possible. All the use-cases I have in mind can already be accomplished in complex hacky ways already. For example using keys like 'el1', 'el2' etc.

2. The hacks needed right now, depend on the data set used to render the components. This prevents a separation of concerns.

3. I know how it can seem like jQuery selectors, and I can see the scope for abuse, but it also makes a whole set of operations much simpler, than they are right now.

4. Finally, there may be a much better solution, but I can't think of it.

[Sebastian Markbåge]

The latest proposal is to use callbacks to get handles instead of string refs:

https://github.com/reactjs/react-future/blob/master/01%20-%20Core/06%20-%20Refs.js#L21

Since these are simply functions, you can chain them so that multiple callbacks gets attached to a single element. node => { ref1(node); ref2(node); }

Likewise, the same callback can be used on multiple elements. <div ref={callback}><span ref={callback} /></div>. It needs some record keeping since each callback can be fired multiple times.

This would give you all the power that you're looking for.

[Naman Goel]

I didn't know the same callback could be attached to a bunch of refs. That sounds cool. (the repo seems to suggest something slightly different, as far as I could understand it. With ref objects that return promises...)

This would indeed solve the problem, thanks.

[Martin Jurča]

In case you need to set multiple refs on a component/element, you may use this little library: https://www.npmjs.com/package/@seznam/compose-react-refs