React - Equivalent to Angular template reference variables?

Question

Is there any substitute or work around for achieving the work of template reference variables of Angular in React?

In Angular, a template reference variable is often a reference to a DOM element within a template. You declare a reference variable by using the hash symbol (#).

For Example, the #firstNameInput declares a firstNameInput variable on an <input> element.

<input type="text" #firstNameInput>
<input type="text" #lastNameInput>

After that you can access the variable anywhere inside the template. For example, I pass the variable as an parameter on an event.

<button (click)="show(lastNameInput)">Show</button>


show(lastName){
    console.log(lastName.value);
}

you can use refs but `thinking in react` - button and inputs are children (components) in one component ('template'). input changes are stored in parent state (handler passed as prop); button calls handler defined in parent, too. If you need more shared values/state then use redux — xadm, Aug 27 '18 at 11:31

score 9 · Accepted Answer · answered Aug 27 '18 at 11:51

A direct counterpart to Angular template reference variables is React ref.

In React 16.3 createRef was introduced:

class Some extends React.Component {
  fooRef = React.createRef();
  barRef = React.createRef();

  componentDidMount() {
    console.log(this.fooRef.current instanceof Node); // true
    console.log(this.barRef.current instanceof Bar); // true
  }

  render() {
    return (
      <input type="text" ref={this.fooRef}>
      <Bar ref={this.barRef} />
    );
  }
}

It acts similarly to Angular references and ViewChild, a ref is an object with current property which is component instance for stateful components and DOM element for non-components.

This Angular query

@ViewChild('barRef', { read: ElementRef })

is similar to React

ReactDOM.findDOMNode(this.barRef)

and should be generally avoided for components that can be communicated in a different way.

In older React versions getting a ref involves assigning it manually with a function:

<Hi ref={ref => this.hiRef = ref}

Where ref is component instance for stateful components and DOM element for non-components.

In React, refs are used relatively rarely, passing callback functions through props is generally more preferable way of communication between components (passing a callback as component @Input, in Angular terms).

For multiple children there should be multiple refs. Ways they can be handled are covered here, https://stackoverflow.com/questions/54633690/how-can-i-use-multiple-refs-for-an-array-of-elements-with-hooks — Estus Flask, Oct 28 '20 at 18:40

score 3 · Answer 2 · answered Aug 27 '18 at 11:27

3

Yes and it's called refs. Docs : https://reactjs.org/docs/refs-and-the-dom.html

answered Aug 27 '18 at 11:27

Maciej Wojsław

403
2
10

1

This is correct, but depending on what you're trying to achieve, you may not even need refs. This Thinking in React article (https://reactjs.org/docs/thinking-in-react.html) might be worth going through. – bamtheboozle Aug 27 '18 at 11:28
@DragoşPaulMarinescu Same goes for Angular. It can be done in different ways. – Estus Flask Aug 27 '18 at 11:31
@estus yup! but react is way different in comparison with angular. devs switching from angular are tempted to try and use what they know from angular, despite there being better ways of doing that in react! – bamtheboozle Aug 27 '18 at 11:42
@DragoşPaulMarinescu I agree and mentioned this in my answer. – Estus Flask Aug 27 '18 at 11:56

React - Equivalent to Angular template reference variables?

2 Answers2