How Do I Access DOM Elements in React Without Using `document.getElementById()`?

How to Access a DOM Element in React? What is the Equivalent of document.getElementById() in React?

Accessing DOM elements in React differs from the conventional document.getElementById() method in vanilla JavaScript. React provides several approaches for selecting DOM elements.

React Refs

Refs allow you to create a reference to a DOM element within a React component. This reference can be used later to access the DOM node.

Callback Pattern (Recommended)

In React 16.2 and earlier, a recommended way to use refs is through the callback pattern:

<Progressbar completed={25}>

This creates a callback function that receives the DOM node as an argument and assigns it to the Progress array in the component's state.

String Refs

String refs are considered legacy and are not recommended for use. However, they can still be used in older versions of React.

<Progressbar completed={25}>

To access the DOM element, use:

var object = this.refs.Progress1;

Note that string refs may be removed in future releases of React.

React.createRef()

In React 16.3 and later, use React.createRef() to create a ref.

constructor(props) {
    super(props);
    this.myRef = React.createRef();
  }
  render() {
    return <div ref={this.myRef} />;
  }

To access the DOM element, use:

const node = this.myRef.current;

React Hook: useRef

In function components (introduced in React 16.8), use the useRef hook to create a ref.

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

To access the DOM element, use:

const node = childRef.current;

By using these methods, you can access and manipulate DOM elements within React components, allowing for more granular control over the interactions and functionality of your web application.

The above is the detailed content of How Do I Access DOM Elements in React Without Using `document.getElementById()`?. For more information, please follow other related articles on the PHP Chinese website!