In react-router v4 , how can I get the "Ref" of the tag created by tag ""?

Question

In below code:

<MyComponent>
  <Link to="/">Home</Link>
</MyComponent>

and then , because of the < Link /> ,There will be create a tag < a >

how can I get the Ref of < a >?

Thanks !

https://zhenyong.github.io/react/docs/more-about-refs.html try refs. — Plankton, Jul 13 '17 at 05:58
see this \https://stackoverflow.com/questions/38093760/in-react-js-is-there-any-function-similar-like-document-getelementbyid-in-ja/38093981#38093981 — Shubham Khatri, Jul 13 '17 at 06:07

score 0 · Accepted Answer · answered Jul 13 '17 at 16:52

Simply add the ref attribute.

<MyComponent>
  <Link to="/" ref="homeLink">Home</Link>
</MyComponent>

If you are attempting to apply something to the a element node itself (which I assume you are), you can:

var homeLink = ReactDOM.findDOMNode(this.refs.homeLink);

Then you can add classes, change styles, etc. to the homeLink variable as it references the actual DOM node and not the React Link component. Just make sure to do this after MyComponent renders (e.g. the componentDidMount() method in the lifecycle).

wassona · Answer 2 · 2018-04-30T18:33:39.237

0

I needed to find this to lock focus in a modal nav bar.

findDomNode works, at least for now, but it may be on track for deprecation. It turns out that Link has a native innerRef attribute that you can use in the exact same way you would use ref on a normal element. Check it out here.

edited Apr 30 '18 at 18:33

answered Mar 28 '18 at 20:50

wassona

319
1
9

In react-router v4 , how can I get the "Ref" of the tag created by tag ""?

2 Answers2