Why can't refs be enclosed?

Question

I'm trying to use react components like that:

<Dialog ref='dialog'>
  ....
  <Row ref='item'/>
  ....
</Dialog>

Why can't I use this.refs.item in my code?
P.S. I solved this by another way, but this question is interested me yet.

yes because ref is used to access the element not a whole component — Dhaval Patel, Nov 09 '15 at 10:59
If what you posted is the contents of a render method of a parent component then that would work fine — Dominic, Nov 09 '15 at 11:00

score 0 · Answer 1 · answered Nov 09 '15 at 14:49

You can access the mounted DOM element with this.refs.item in this way. Also for your child (row) component.

See working JSBIN with demo here.

How to achieve this depends on the version of react you are using.

In react version 0.13.1 you still need to use React.findDOMNode(this.refs.item) to get the DOM element. In later versions (0.14) this.refs.items points to:

React component if you do <MyComponent ref="foo"/>
The DOM element if you put ref in vanilla HTML items eg. `

See also react documentation here, with important warnings and advise about when to use or not to use refs.

Why can't refs be enclosed?

1 Answers1