JIYIK CN >

Get an element by ID in React:

1. Set the ref attribute on the element.
2. Use the current property to access the element in the useEffect hook.

import {useRef, useEffect} from 'react';

export default function App() {
  const ref = useRef(null);

  useEffect(() => {
    // 👇️ 使用 document.getElementById()
    const el = document.getElementById('my-element');
    console.log(el);

    // 👇️ (better) use a ref
    const el2 = ref.current;
    console.log(el2);
  }, []);

  return (
    <div>
      <h2 ref={ref} id="my-element">
        Some content here
      </h2>
    </div>
  );
}

The above code snippet shows how to use document.getElementById()the method and get an element by ID via a ref.

useRef()The hook can be passed an initial value as an argument. The hook returns a mutable ref object whose .currentattributes are initialized to the passed argument.

注意, we must access the current property of the ref object to access the h2 element on which we set the ref attribute.

When we pass a ref prop to an element, for example <div ref={myRef} />, React .currentsets the property of the ref object to the corresponding DOM node.

We pass an empty dependencies array to useEffectthe hook, so it will only run when the component is mounted.

useEffect(() => {
  // 👇️ 使用 document.getElementById()
  const el = document.getElementById('my-element');
  console.log(el);

  // 👇️ (better) use a ref
  const el2 = ref.current;
  console.log(el2);
}, []);

We use useEffectthe hook because we want to make sure that the ref is set on the element and that the element has been rendered to the DOM.

Alternatively, if we don't have access to the element and cannot set the ref prop on it, we can use document.getElementByIdthe method.

useEffect(() => {
  // 👇️ 使用 document.getElementById()
  const el = document.getElementById('my-element');
  console.log(el);
}, []);

We must useEffectcall the method in a hook or when an event occurs document.getElementById().

Here's an example of getting an element by ID when an event occurs.

import {useRef} from 'react';

export default function App() {
  const ref = useRef(null);

  const handleClick = () => {
    // 👇️ 使用 document.getElementById()
    const el = document.getElementById('my-element');
    console.log(el);

    // 👇️ (better) use a ref
    const el2 = ref.current;
    console.log(el2);
  };

  return (
    <div>
      <h2 ref={ref} id="my-element">
        Some content here
      </h2>

      <button onClick={handleClick}>Click</button>
    </div>
  );
}

You can also select elements by ID or use ref in event handlers.

If we try to get an element by ID or by its ref directly in the render method of a function component, the element we are trying to access may not have been rendered yet.

useEffectThe hook runs after the DOM elements in the component have been rendered to the DOM, so if an element with the provided id exists, it will be selected.