I was a bit surprised when I read the updated React docs about refs. While their examples on the React front page still use this.refs.textarea
, they later "recommend" to not use this approach anymore.
But what's the alternative? I find too long inline code confusing and calling a function instead, like {() => this.initChartLibrary() }
(the () =>
is required to not lose context to this
) requires to build a method that gives the wrong impression of that it can be reused.
In other words, I'd still like to use the String way. But since I fear they'll deprecate it, I was wondering, if there are any other approaches?
As far as I'm aware the main alternative to ref
strings is in fact the ES6 style callback function.
So:
<textarea ref="myTextArea">
...
</textarea>
// Where refs are then accessed by `this.refs.myTextArea` to perform any operations
Becomes, in a basic form:
<textarea ref={ (ref) => this.myTextArea = ref }>
...
</textarea>
// Where refs are then accessed by `this.myTextArea`
This can be pretty powerful because the ref
attribute in React automatically receives the referenced component as a parameter, which allows us to immediately implement our callback operations on it if we'd like. This can be used in a simple form, as above, to assign that reference to this.myTextArea
, or as you've probably noticed in the docs, you can be a bit more direct and do things like:
<input
ref = {(input) =>
{ if (input != null) {input.focus()} }
} />
That being said, although this sometimes means you can express your code in the fewest number of lines, it definitely sacrifices readability. If you are just looking to save a reference to the component for use in an event handler (as is very commonly the case) using a ref
string is honestly still the cleanest way to do so.
I really wouldn't anticipate them to be deprecated without warning, as they are used pretty heavily in React & remain convenient, but if they ever are your best bet would be a straightforward refactor with a simple (ref) => this.myRef = ref
then accessing your refs by this.myRef
.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With