How to Access DOM Elements in React: A Guide to Refs and Best Practices?

How to access a DOM element in React? What is the equilvalent of document.getElementById() in React

In this article, we will explore the methods of accessing DOM elements in React. React, a popular JavaScript library for building user interfaces, offers a different approach to managing DOM compared to traditional methods used in vanilla JavaScript. React utilizes a virtual DOM, which keeps track of the state of the UI, making it easier to update and manage the UI in a declarative manner.

So, how can we access a specific DOM element within a React component? Traditionally, in vanilla JavaScript, we rely on methods like document.getElementById() to target and retrieve DOM elements. In React, there are several approaches to achieve this, and they have evolved over time with different React versions.

Using String Refs (Deprecated):

In older versions of React, string refs were commonly used to access DOM elements. Here's how it works:

<Progressbar completed={25}>

In this example, the ref attribute with the value "Progress1" is attached to the Progressbar component. To access the DOM element, you can use:

var object = this.refs.Progress1;

However, this method is considered legacy and is likely to be removed in future React releases. Facebook advises against using string refs due to potential issues and encourages the use of alternative methods.

Using the Callback Pattern (Recommended for React 16.2 and earlier):

A recommended approach for React 16.2 and earlier is to use the callback pattern, which allows access to the DOM element directly within the component's render method:

<Progressbar completed={25}>

In this example, the ref attribute is defined as an arrow function that receives the DOM element as an argument (input in this case) and assigns it to an array in the component. This allows for direct access to the DOM element within the component.

Using React.createRef() (React 16.3 ):

In React 16.3 and later versions, React.createRef() is used to create a ref. You typically assign the created ref to an instance variable in the constructor:

constructor(props) {
  super(props);
  this.myRef = React.createRef();
}

To access the DOM element, you can use:

const node = this.myRef.current;

This method is recommended for accessing DOM elements in React and is considered best practice.

Using React.forwardRef() and useRef() (React 16.8 ):

In functional components introduced in React 16.8, you can use React.forwardRef with useRef to create refs and access DOM elements. React.forwardRef is used to forward the ref to the DOM element, and useRef is used to create the ref:

const Child = React.forwardRef((props, ref) => {
  return <div ref={ref}>Child</div>;
});

const App = () => {
  const childRef = useRef(null);
  return <Child ref={childRef} />;
};

To access the DOM element, you can use:

<Progressbar completed={25}>

Note: String refs are discouraged, so using any of the above recommended methods is preferred. React offers various options for accessing DOM elements, and the choice depends on the version of React you are using.

The above is the detailed content of How to Access DOM Elements in React: A Guide to Refs and Best Practices?. For more information, please follow other related articles on the PHP Chinese website!