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
– xadm, Commented Aug 27, 2018 at 11:31

Estus Flask · Accepted Answer · 2018-08-27 11:51:54Z

10

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).

answered Aug 27, 2018 at 11:51

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

anaval Over a year ago

how about ViewChildren?

Estus Flask Over a year ago

For multiple children there should be multiple refs. Ways they can be handled are covered here, stackoverflow.com/questions/54633690/…

Maciej Wojsław · Accepted Answer · 2018-08-27 11:27:44Z

3

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

answered Aug 27, 2018 at 11:27

Maciej Wojsław

4032 silver badges10 bronze badges

4 Comments

bamtheboozle Over a year ago

This is correct, but depending on what you're trying to achieve, you may not even need refs. This Thinking in React article (reactjs.org/docs/thinking-in-react.html) might be worth going through.

Estus Flask Over a year ago

@DragoşPaulMarinescu Same goes for Angular. It can be done in different ways.

bamtheboozle Over a year ago

@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!

Estus Flask Over a year ago

@DragoşPaulMarinescu I agree and mentioned this in my answer.

Collectives™ on Stack Overflow

React - Equivalent to Angular template reference variables?

2 Answers 2

2 Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related